What does React's reconciliation do?
Options
- It compiles JSX to WebAssembly for the browser
- It diffs old and new trees and patches the DOM (Correct option)
- It syncs the state of components to the server
- It caches the API calls that components make
Answer
Diffs the new element tree against the previous one and applies minimal DOM updates
Why
Changing the real DOM is slow. When state changes, React builds a new description of the UI, compares it with the previous one ('diffing') and changes only the parts of the real DOM that differ.
Rules: if an element's type changes (div → span), React rebuilds that subtree; in lists, keys identify which child is which.
Remember
Reconciliation = diff old and new UI, update only the changes.