How does React work under the Hood?

Earlier the websites were made by manipulating the DOM. The problem using this approach is that whenever there is a change such as an update in your app, the browser re-renders the page and again creates the DOM and the whole process repeats.

This is a really painful process, especially for large-scale applications. What React does is, it creates a Virtual DOM and gives the update only for that particular change.

So, let us know some jargon which helps us to understand this even better.

What is Re-Render?

When a component’s state or props change, React automatically triggers a re-render of that component. For Example, let’s say your application has a component named Counter and it has Button and Count and whenever you click on the button, the count updates by 1.

The Updation is done using one of the React Hooks named – useState. React automatically detects the state change and triggers a re-render of the Counter component with the updated count value, causing the UI to reflect the new state.

What is Virtual DOM?

When a component’s state changes in React, React constructs a new Virtual DOM representation of the component’s UI based on the updated state.So, in the above example whenever the State changes/updates, Virtual DOM is Updated.

Again, let’s consider an example. Suppose you are building a Food ordering app and have these components :

1 Restaurant Component – which has the list of restaurants.

2 Top Rated Restaurants Component – when clicked,it displays the Top Rated Restaurants.

What React does is, first it creates a Virtual DOM of all the restaurants. Whenever you click on Top Rated Restaurants, Your React Virtual DOM will filter the top-rated restaurants and now the virtual DOM consists of only top-rated restaurants.It calculates the differences between current Virtual DOM and previous Virtual DOM.

This is called Diffing, also known as Reconciliation is the process by which React compares the current virtual DOM representation of a component with a new virtual DOM representation to determine what has changed.

Re-rendering the entire app on each change only works for the most trivial apps; in a real-world app, it’s prohibitively costly in terms of performance.

React has optimizations that create the appearance of the whole app re-rendering while maintaining great performance. The bulk of these optimizations are part of a process called reconciliation.

React is designed so that Reconciliation and Re-rendering are separate Phases. The reconciler does the work of computing which parts of the DOM tree has changed, the re-render then ensures that information to update in the Re-rendered App.

This is how React works under the hood and React is Fast because it does Efficient DOM Manipulation. It can find out the difference between Virtual DOMs and update the UI Efficiently.