Explain React reconciliation and Fiber architecture

Interview framing: This is not about reciting internals for trivia. The goal is to connect React's update model to real bugs like unnecessary renders, wrong keys, and slow interactions.

Core explanation:

1. State or props change:

• React creates a new description of the UI tree.
• It compares the new tree with the previous one during reconciliation.

2. Diffing assumptions:

• Different element types produce different subtrees.
• Stable keys let React match list items across renders.
• Bad keys, especially array indexes in changing lists, can cause wrong state reuse and extra work.

3. Render phase:

• React calculates what should change.
• This phase can be interrupted, restarted, or deprioritized in modern React.
• Components should stay pure because render can happen more than once.

4. Commit phase:

• React applies changes to the DOM and runs layout/effect work.
• This phase is synchronous because the visible UI is being mutated.

5. Fiber:

• Fiber represents units of work in the component tree.
• It lets React split rendering work and prioritize urgent updates.

Practical debugging:

• Use React Profiler to find slow components.
• Check unstable keys, broad state updates, expensive derived values, and unnecessary context invalidation.

Good closing: "I use these internals to reason about observable behavior: why a component rendered, whether the DOM actually changed, and where the expensive work happened."