Q109- Explain React Fiber and reconciliation

React Fiber is the reimplementation of React’s core algorithm (reconciliation) designed to improve rendering performance, especially for complex UIs and asynchronous rendering.

---

1️⃣ Reconciliation in React

• Reconciliation is the process React uses to update the DOM efficiently.
• When a component’s state or props change:
  1. React creates a virtual DOM tree for the new state
  2. Compares it with the previous virtual DOM (diffing)
  3. Determines the minimal set of changes to update the real DOM
• This process ensures efficient updates rather than re-rendering the entire UI.

---

2️⃣ Problems Before Fiber

• React used a stack-based synchronous algorithm
• Limitations:
  • Could block the main thread during large updates
  • No ability to pause, prioritize, or resume work

---

3️⃣ What React Fiber Solves

• Fiber introduces incremental rendering and task prioritization:
  • Split rendering work into units of work (Fibers)
  • Pause and resume rendering if a higher priority update comes in
  • Supports async rendering for smoother user experience
• Fiber assigns priority levels to updates:
  • User input → high priority
  • Animations → medium priority
  • Network/fetch updates → low priority

---

4️⃣ How Fiber Works

1. React creates a Fiber tree representing each component
2. Each Fiber contains:
   • Component type
   • Pending updates
   • Child/sibling/return references
3. React traverses the Fiber tree incrementally, performing updates without blocking the main thread
4. Commit phase updates the real DOM after all high-priority Fibers are processed

---

5️⃣ Key Benefits

• Smooth animations and interactions even during large renders
• Ability to pause, abort, or prioritize updates
• Efficient handling of concurrent features (like Suspense, concurrent mode)

---

6️⃣ Example of Reconciliation

const [count, setCount] = React.useState(0);

// Initial render → 0
setCount(1); // Fiber updates only the text node

• React only updates the changed DOM node instead of re-rendering the entire component tree.

---

⚡ In short:

React Fiber is a reimplementation of React’s rendering engine that breaks rendering into small units of work, allowing prioritization and interruption, while reconciliation efficiently updates the DOM by diffing virtual DOM trees and committing only the minimal changes.