Whenever there’s a state change, you blink an eye and React re-renders. Its so fast you wouldn’t even know something was off.

React gained a lot of popularity (for all the right reasons) because it can efficiently handle complex UI updates. React is “React” because it reacts to data changes in an efficient. It was designed to create reactive UIs that efficiently update and render components based on changes in app-state.

But how does React do that? What makes React “blazing-fast”? If your answer is Virtual DOM, you’re wrong. Virtual DOM is a small part of it.

My whole life has been a lie — meme

Cat emotions aside, have you ever heard of React Fibre, Reconciliation and the Diffing Algorithm. What are these terms I am throwing at you? Lets go through this blog further to understand them.

Reconciliation in React

Whenever there’s a state change in the component, React has to wonder what changes are necessary to keep for the DOM in order to avoid re-renders. This is done via diffing algorithm. It compares the virtual DOM with a new one and identifies the difference between the two. Then re-render only those necessary parts instead of the entire DOM which otherwise can be slow. Reconciliation is designed to minimise the number of re-renders, prioritising more on speed and performance of the web-app.

React Fibre

Before React Fibre, there was a Stack Reconciler. It was used by React for state updates but it was synchronous and froze the main thread. That means once React starts updating the UI, it cannot be interrupted, irrespective of the time it took. Imagine a huge application with tons of UI updates happening, this could slow things down.

Enter React Fibre(in React 16) - when React Fibre was introduced it changed a lot of things. Making updates in a React App was more smooth and efficient. React’s rendering engine could now break down the rendering task into small units.

Imagine this:

• Before Fibre: You go to the gym and you cannot leave before you complete all your workouts without any break, even if you are exhausted.

• After Fibre: You go to the gym, do your sets, drink some water, greet some of your gym-mates and resume the workout.

eat-sleep-gym-repeat

How React Fibre helps Reconciliation

Fibre helps split the rendering task into small units that allows React to pause, prioritise and resume the updates. Whenever a high priority task comes up like an user input or an animation, React can stop low-priority tasks like API calls and handle the important task upfront. React can also handle multiple updates at the same time, without blocking the main thread. Better error handling for React to be able to catch errors in child components and the support for React Suspense for asynchronous component rendering.

Is Diffing Algorithm heavy?

Since updating the real DOM directly is a slow process, React first updates a Virtual DOM. The diffing algorithm is expensive, computation-wise but React optimises it to make it effective. Its only calculating the difference in changes between the current Virtual DOM and a new one — then why is it expensive?

If React had to compare every node (HTML elements) in the virtual DOM, individually or in other words, via brute-force, it would take O(n³) time (considering the worst case). Oh boy, O(n³) is gonna be slow for huge applications.

when your solution runs at O(n²) time — meme

If it take O(n³) in a worst case then how is React fast?

To avoid heavy performance hit, React uses two optimisations:

1. Tree Diffing (Element Check) -> O(n) complexity:

You know that the DOM is a tree-like structure of connected nodes that represents the different elements in HTML. React compares the two DOMs (current and new) at the same level. If an element changes type from <span> to <div> then React destroys the tree-node and it creates a new one.

How does this help — this way React doesn’t do a deeply-nested comparison (increasing performance). React will not compare the child elements of <span> as it encounters that the top element has changed.

2. Key Based Diffing

If you’ve been working with React then you know that keys are an essential part while iterating over the data for displaying some content. React uses keys to track items efficiently.

• If an item moves in the list but keeps the same key, React reuses the DOM node instead of re-rendering everything.

• Without keys, React might re-render every list item unnecessarily.

When Diffing Becomes Heavy

Even with optimizations, diffing can become expensive if:

1. Too many unnecessary re-renders happen — When state updates trigger re-renders that don’t actually change the UI.

2. Keys are misused in lists — Using index as a key causes React to re-render everything when items move.

3. Large components are re-rendered unnecessarily — If a small state change triggers a full component tree re-render.

React is blazing-fast because it updates the Virtual DOM first, then applies only the necessary changes to the Real DOM. Its efficient diffing algorithm minimizes re-renders, and React Fiber enables interruptible, prioritized rendering. This makes UI updates smooth, responsive, and highly efficient!