React Internals: Fiber & Reconciliation

React is famous for its speed, but "Magic" isn't the reason. It is the Virtual DOM and the Reconciliation process. Specifically, the introduction of React Fiber changed how React handles rendering forever.

1. What is the Virtual DOM?

Updating the Real HTML DOM is incredibly slow. Real DOM nodes have hundreds of properties and cause "browser reflows." The Virtual DOM is a lightweight JavaScript object that mirrors the UI. When state changes, React updates the Virtual DOM first, which is 100x faster than touching the browser.

2. The Diffing Algorithm

React compares the "Old Virtual DOM" with the "New Virtual DOM." This is called Reconciliation. It calculates the minimum number of changes needed (e.g., "Change the text of this one button") and applies ONLY those changes to the real browser DOM.

3. React Fiber (The Game Changer)

Before Fiber, React rendering was "Synchronous." If you had a massive list, the browser would freeze until the render finished. Fiber turned rendering into a "Task" that can be paused, resumed, or discarded. This allows the browser to stay responsive even during heavy UI updates.

4. Interview Mastery

Q: "Why does React require a 'key' prop when rendering lists?"

Architect Answer: "The 'key' is a hint for the **Reconciliation** algorithm. Without a key, if you reorder a list, React might think every item has changed and re-render the whole list. With a unique key, React knows 'Item A just moved from index 0 to index 5' and it won't re-render the item itself, only its position. This is the difference between an O(N) update and an O(N^3) update in complex UIs."