What is the React reconciliation algorithm?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid React.js basics — a prerequisite for any developer role.
Answer
Reconciliation is the process React uses to determine what changes need to be made to the DOM when a component's state or props change. React compares the new Virtual DOM tree with the previous one (diffing) and computes the minimal set of changes. The algorithm has two main assumptions that make it O(n) instead of O(n³) like a general tree diff: (1) Different types produce different trees: if an element changes from <div> to <span>, React tears down the entire subtree and builds a new one. (2) Keys identify stable elements across renders: elements with the same key in the same position are assumed to be the same component instance. Same type: React updates the existing DOM element's attributes/properties instead of replacing it. For class components, the instance is preserved; componentDidUpdate is called. For function components, the function is re-called. The reconciler in React 18 is called Fiber — it breaks rendering work into small units that can be interrupted and resumed, enabling concurrent features like transitions and Suspense.
Common Mistake
Rushing to answer is a common mistake. Take two seconds to structure your response: definition → example → trade-off. This structure makes complex React.js answers easy to follow.