Reconciliation

Reconciliation is how React compares the new element tree with the previous one and decides which DOM nodes to reuse, update, or discard. Component type and `key` at the same position determine whether identity is preserved. Changing type at a slot unmounts the old subtree.

Render phase work should be pure; commit phase applies DOM updates and runs layout effects. Understanding this split explains why render can run more than once in development and why side effects belong in effects, not render.

Interviewers ask you to trace a prop change through rerender, diffing, and commit.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Same component type plus key preserves instance state.
• Type changes reset subtree state.
• Keep render pure; commit handles DOM.