# Render > Reconciliation > React

## 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](https://reactjs.org/docs/reconciliation.html) and it uses a **diffing** algorithm based on two assumptions:-
1. Two elements of different types will produce different trees.
2. 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

![RRR-1.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646885394724/0APzVWCGf.gif)
- 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

![RRR-2.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646886640175/H8czgY5pp.gif)
- 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

![RRR-3.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646887047951/VjCxt2TMG.gif)
- 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

![RRR-4.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646888873425/W6wlIwajTZ.gif)
- 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

![RRR-5.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1646889619644/1BRO7XiAl.gif)
- 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.