Reconciliation is the algorithm used by React every time it has to re-render the application.
Initially, when we define the application structure (first render), React goes through the components and builds a tree of them (virtual-dom). This tree defines that application structure of ours.
It goes from parents to children and then back to parents to confirm the integrity of the components on every level.
Then it builds the DOM tree of the components in the structure tree in a form of HTML tags.
Once we modify any of the the component in the application, React checks if it should re-render said component (shouldComponentUpdate, checks if component is pure, has React.memo etc.). It also goes to children to see if the changes affect them.
Based on that React builds list of things to re-render (using the diff algorithm). After that both structure tree and DOM tree are reconciled and the DOM tree gets re-rendered.
There are two phases of the reconciliation:
- Rendering phase
- checking what should be on the screen and if the particular components have to be re-rendered
- Commit
- applying the changes from virtual-dom to real DOM.
[!tip] To make sure the app is re-rendered properly, when we render the lists, we need the
keyprop.
In other words reconciliation is batched syncing of virtual-dom with real DOM.
In React for web reconciliation is a responsibility of react-dom package.