React Diffing and Reconciliation

Problem Explain React's diffing algorithm and the reconciliation process - how does React decide what to re-render when state or props change?

Be ready to discuss

• The virtual DOM: React builds an element tree each render and diffs it against the previous tree, applying only the minimal set of real DOM mutations.
• Why React uses an O(n) heuristic rather than the general O(n^3) tree-diff, and the two assumptions that make it sound.
• Different element types are assumed to produce different trees: React unmounts the old subtree (losing its state) and mounts a fresh one.
• Same element type: React keeps the DOM node and the component instance, and compares props one by one, updating only the attributes that changed.
• Lists and the key prop: keys let React match children across renders so it can reorder and reuse nodes instead of destroying and recreating them.
• Why using array index as a key breaks on insert/reorder - state ends up attached to the wrong item.
• Reconciliation vs rendering: the diff computes work, the commit phase applies it; the Fiber architecture lets React interrupt and prioritise that work.