React Reconciliation

Published: 10/3/2024

React reconciliation is a a process of how react build it's virtual DOM and then updates the real DOM.

Batching: React batches updates to the real DOM during the reconciliation, combining multiple vDOM updates into a single DOM update. This reduces the number of times the real DOM has to be updated and therefore lends itself to better performance for web applications.

Reconciliation Journey:

Stack Reconciliation:

Before react16 version, Stack reconciliation strategy. It follows LIFO. It has two fundamental operations. PUSH and POP.

The stack reconciler would render the updates sequentially without being able to pause or defer the work.

If the computationally expensive component blocks rendering, user input will appear on screen with an observable lag.

This leads to poor performance, since the text field is unresponsive.

There is a need to be able to bail out of current work if interrupted by higher priority rendering work, like user input. Todo this, React needs to have a sense of priority for certain types of rendering operations over others.

Challenges:

• React reconciler did not prioritize the updates. means less important updates could block high important updates.

It didn't allow updates to be interrupted or cancelled.


To overcome this React team came up with another strategy called Fiber Reconciliation.

Fiber Reconciliation:

It follows "Fiber" data structure that represents single unit of work for the reconciliation.

Fiber reconciliation is allows updates to be prioritized and executed concurrently.

It follows key concepts of

• Double Buffering
• Render Phase
  • beginWork
  • completeWork
• Commit phase
  • Mutation
  • Layout