How React Work

Understanding How React Works Internally

React is a popular JavaScript library for building user interfaces (UI). To optimize performance and write efficient code, it's essential to understand how React works under the hood.

Virtual DOM & Reconciliation

React uses the Virtual DOM (VDOM) to optimize UI updates. When the state or props change, React does not update the real DOM directly but follows these steps:

1. Creates a new Virtual DOM: This is an in-memory representation of the current DOM.
2. Compares with the previous Virtual DOM (Diffing Algorithm): React calculates the differences between the two VDOMs using an efficient diffing algorithm.
3. Updates the real DOM (Reconciliation Process): Only the necessary changes are applied to the actual DOM, minimizing expensive UI operations.

Render Phase & Commit Phase

React updates the UI in two main phases:

• Render Phase: React creates a new Virtual DOM and compares it with the previous one. This phase can be paused when using Concurrent Mode.
• Commit Phase: Changes are applied to the real DOM, and side effects (useEffect, lifecycle methods like componentDidMount, etc.) are triggered. This phase cannot be paused.

React Fiber: How React Manages Rendering

Before React 16, rendering was synchronous (blocking), causing UI lag for large updates. React 16 introduced React Fiber, an architecture that enables:

• Breaking down rendering into small units called "fiber units."
• Pausing and resuming rendering as needed, ensuring a smoother UI experience.
• Supporting Concurrent Mode for performance optimizations.

Concurrent Mode: Smoother UI Rendering

Concurrent Mode allows React to pause rendering tasks to prioritize more urgent updates, leading to a more responsive UI. Key features include:

• useTransition: Helps transition states smoothly without blocking UI updates.
• Suspense: Enables lazy loading of data with a better user experience.

React Batching & Scheduling

React optimizes rendering by batching multiple state updates together, reducing unnecessary renders. For example:

function App() {
  const [count, setCount] = React.useState(0)
 
  function handleClick() {
    setCount((c) => c + 1)
    setCount((c) => c + 1)
    setCount((c) => c + 1)
  }
 
  return <button onClick={handleClick}>{count}</button>
}

In React 18, all state updates inside event handlers are batched into a single render, improving performance.

Conclusion

Understanding how React works internally helps optimize applications, avoid performance pitfalls, and leverage new features like Concurrent Mode and React Fiber. To write better React code, always consider how React renders and updates the UI!