Relationships and Mechanics Between Reconciliation, Virtual DOM, and Fiber Algorithm

In the realm of React, three crucial components work together to manage UI updates: the Virtual DOM, the reconciliation process, and the Fiber algorithm (introduced in 2016). Let's explore their roles and interactions.

When a state variable, managed by the useState hook, undergoes a change triggered by the state-changing function, every instance of the component in the DOM must re-render to reflect the updated state variable's value. This process ensures that any changes are accurately reflected in the user interface. While this provides a brief overview of how state updates propagate through UI changes, let’s delve deeper into the mechanics behind it.

Reconciliation and Virtual DOM: How They Work

When a state variable changes, the reconciliation process detects this change and re-renders the affected component to create a new DOM representation, which resides only in memory. This in-memory representation is called the Virtual DOM, reflecting the updated state of the component. The reconciliation process then compares the current Real DOM with the new Virtual DOM to identify differences, using a method known as the diffing algorithm. These identified changes are injected into the actual DOM, potentially triggering a repaint of the particular component by the browser's rendering engine.

Introduction of Fiber: Enhancing Performance

This describes the relationship between the reconciliation process and the Virtual DOM. Now, let’s understand the changes introduced with the advent of the Fiber algorithm. Before Fiber was introduced, there were unnecessary renders of elements. Fiber optimizes this process by identifying multiple changes to the state variable. If these changes are similar, identical, or based on the same value of the state variable, they can be batched together, allowing for only one rendering of the component. To understand this more precisely, let's consider an example.

Example 1: Sequential State Updates

Before Fiber

import React, { useState } from 'react';

const CounterExample1 = () => {
  const [count, setCount] = useState(0);

  const incrementCounter = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterExample1;

In the provided code, when the handler function for the onClick event is executed, it uses the state management function from the useState hook to increment the value of the state variable by 1 three times synchronously.
However, there's a catch — the final value will only be incremented by 1, because each setCount uses the same stale value.

After Fiber

Fiber detects identical consecutive updates and batches them, scheduling only one render.

Example 2: Callback Function Updates

import React, { useState } from 'react';

const CounterExample2 = () => {
  const [count, setCount] = useState(0);

  const incrementCounter = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default CounterExample2;

Before Fiber

Three renders would occur because each update modifies a different value derived from memory.

After Fiber

Fiber analyzes each update. Since they modify different values, the renders are legitimate and cannot be batched.

Conclusion

In conclusion, the Virtual DOM is created by the reconciliation process to compare changes between the real DOM and the Virtual DOM. Once the differences are identified, they are applied to the actual DOM.
Fiber optimizes this process by batching identical updates, prioritizing renders, and reducing overhead.

Still can't figure out the picture? Refer to a dedicated article for deep React internals.