Introduction
One of the reasons React is so popular is that it's blazing fast. This speed is achieved by updating only part of the real DOM that has changed. But, updating the real DOM is a slow process. So, how does React achieve this? React achieves this using virtual DOM.
Virtual DOM is a lighter version of real DOM. But, it looks nowhere like the real DOM instead it's a tree of React(JS) objects that represent the UI at an instant.
Think of the real DOM as a building and virtual DOM as a blueprint of the building.
When a state changes or prop updates, it triggers a render.
When we hear the term "render" we think of it as painting a picture or printing a page. However, in React this is not what "render" means!
Render
This is a process of traversing through the virtual DOM and collecting the updated states or props and running the render() function for those components which use the updated state or prop and create the new virtual DOM.
Reconciliation
This process involves comparing the new virtual DOM with the old virtual DOM and finding the differences. This process is called reconciliation and it uses a diffing algorithm based on two assumptions:-
- Two elements of different types will produce different trees.
- The developer can hint at which child elements may be stable across different renders with a key prop.
Due to the 2nd assumption, you might have seen Warning: Each child in a list should have a unique "key" prop many times. Now you know why this happens.
We'll look into what the 1st assumption means in the example given later.
React
Once React finds the most efficient way to update the UI, the real DOM gets updated.
This is called a React phase or Commit phase (not render phase).
Let's understand this better with an example:
Throughout this example, the UI will remain the same, only the code will change.
Part 1
- We have a simple counter with 2 buttons increment and decrement.
- We also have a div that changes style at the click of a button.
- CSB: https://codesandbox.io/embed/rrr-1-g58481
- on clicking increment/decrement the counter increases/decreases.
- then, if we click on Toggle Style the background changes.
- there is no effect on the counter on clicking Toggle Style.
Part 2
- Now, we change the code slightly for the style change div
- CSB: https://codesandbox.io/embed/rrr-2-9dv9jb
- We've changed the style change div to a single component and on the click of Toggle Theme we see the same output as before.
Part 3
- Now, we change the code slightly more for the style change div
- CSB: https://codesandbox.io/embed/rrr-3-ng6xrf
- instead of just the style of h1 being changed we see the whole h1 being changed and not just that we see the whole example-2-wrapper div and its children being changed.
- So, what happened here is on click of Toggle Style the whole component is being changed and is rendered accordingly. So, looking at the real DOM, it might look like not much needs to be changed but instead of looking at the real DOM, we need to look at the virtual dom and then we see the Comp1 being changed to Comp2 and vice versa and hence all of its children will render.
Part 4
- Now, we change the code slightly again
- CSB: https://codesandbox.io/embed/rrr-4-l016gq
- Now, we extracted the counter into a component keeping other things the same.
- As excepted, the output remains the same as before
Part 5
- Now, we make some more code changes
- CSB: https://codesandbox.io/embed/rrr-5-2t6t72
- On clicking Toggle Style we see the counter getting reset.
So, what's happened here is, the same that happened in Part 3. On clicking Toggle Style a new component gets rendered and hence all of its children get rendered freshly.
In case, we need to make the counter retain its state then we may use context
The way React sees while diffing:
- Node is same -> React goes inside
- Node is different -> Change fully
This was my understanding of Render Reconciliation React.
