Day 2: How React Updates the UI

Yesterday I learned what React does. Today I learned how it does it.

I used to wonder how React knows exactly what to change in the UI. If you change one word in a paragraph, does React rebuild the whole page? No. It uses a smart process to stay fast.

Here is the breakdown of the React update cycle.

Reconciliation and Diffing

Reconciliation is the strategy. Diffing is the actual method. React compares the new Virtual DOM tree with the old one.

Comparing two trees is hard for computers. A standard algorithm is too slow. React stays fast by making two assumptions:

  • If an element type changes, React destroys the old tree and builds a new one.
  • If the type stays the same, React only updates the changed attributes.

This allows React to run in O(n) time. This makes updates feel instant.

The Two Phases

React splits its work into two distinct steps:

  1. Render Phase This is the planning stage. React calls your components and calculates the changes. It does not touch the Real DOM here. Think of it as an architect drawing a blueprint.

  2. Commit Phase This is the construction stage. React applies the calculated changes to the Real DOM. This part is synchronous. Once it starts, it does not stop until the work is done.

Important: React updates the DOM, but the browser paints the pixels. React handles the structure. The browser handles the visual rendering.

React Fiber

Before React 16, rendering was synchronous. If a render took a long time, the browser would freeze. You could not scroll or type.

Fiber changed this. Fiber is the engine that manages the Render Phase. It allows React to:

  • Pause work and come back to it later.
  • Prioritize urgent updates like user typing over background data.
  • Split work into small chunks.

The Virtual DOM is the data structure. Fiber is the algorithm that operates on that data.

Summary of the flow:

• State changes. • Render Phase: React plans changes via Diffing. • Commit Phase: React updates the Real DOM. • Browser: Layout, Paint, and Composite. • Pixels appear on screen.

Source: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f