Render then commit
In React, rendering means calling your components to produce element trees. Reconciliation is the algorithm that compares the new tree to the previous one and decides what to change in the DOM during the commit phase.
Identity rules
React assumes the tree is mostly stable and uses heuristics:
- Different element type means destroy the old subtree and build a new one.
- Same type means update props and keep the underlying DOM node and state.
- For lists, a stable key tells React which item is which.
Using an array index as a key can cause state to attach to the wrong row when items reorder.
Avoiding wasted renders
- Lift state only as high as needed.
- Use memoization to skip subtrees whose props did not change.
Key idea
React reuses a node when type and key match, so stable keys keep component state attached to the right element.