React Fiber Reconciliation - the Diffing Algorithm

How React decides what to update and what to leave alone

When we talk about React performance, two terms always come up: Fiber reconciliation and the diffing algorithm. Understanding how these work gives you a much clearer picture of why React feels fast and how it avoids unnecessary DOM updates.

What is Diffing?

Diffing is the algorithm React uses to compare the previous Virtual DOM with the new Virtual DOM.

The goal is simple but powerful:

Detect which parts of the UI have changed and calculate the minimum updates required for the real (original) DOM.

Instead of updating the entire DOM on every change, React figures out exactly what changed and updates only those parts.

How React Compares Virtual DOM Trees

React compares:

• The previous Virtual DOM
• The new Virtual DOM created after a state or props change

During this comparison, React decides:

• Which elements can be kept
• Which elements need to be updated
• Which elements should be removed

Two Common Cases During Reconciliation

During diffing, React mainly encounters two types of changes:

Element change at the same level

If an element changes at the same level of the tree:

• The old element is removed along with its children
• A new element subtree is created and inserted

This is why changing element types (for example, <div> → <section>) can be expensive.

Props change at the same level

If the element type is the same but props change:

• React updates only the specific properties that changed
• The rest of the DOM remains untouched

This is the most efficient and common case.

Example Scenario: Overlay on a Component

Assume we have three components:

• Component A
• Component B
• Component C

Component B displays a modal using an overlay.

Initial state: The overlay is visible.

State Change Happens

Now, the overlay status is set to false.

What happens next?

1. React triggers a state update
2. A new Virtual DOM is created reflecting the change
3. The overlay is removed and some internal state is updated

Fiber Diffing & Preparing the Commit

React Fiber now steps in:

• It compares the old Fiber tree with the new Fiber tree
• It identifies exactly what changed
• It prepares a new set of instructions describing:

This phase is where React decides the minimum set of DOM operations needed.

Commit Phase: Updating the Real DOM

Finally, based on the reconciliation result:

• React applies the calculated changes to the original DOM
• Only the required DOM nodes are updated
• Unchanged parts of the UI remain untouched

This is why React applications scale well even as the UI becomes complex.

Final Thoughts

React Fiber and the diffing algorithm are the backbone of React’s performance model. They allow React to:

• Avoid unnecessary DOM updates
• Keep rendering predictable
• Scale efficiently with complex component trees

If you understand this process, concepts like memo, useCallback, and key usage suddenly make a lot more sense.