#135 What is React Fiber?

React Fiber is the new reconciliation engine in React (introduced in React 16).
It’s the underlying algorithm that decides how and when the UI should be updated.

• Why introduced?
  • Old React (Stack Reconciler) did updates synchronously → caused performance issues with large UI updates.
  • React Fiber allows updates to be interrupted, prioritized, and resumed → smoother UI, especially for animations and heavy rendering.

---

🔹 Key Features of React Fiber

1. Incremental Rendering
   • Breaks rendering work into small chunks (units of work).
   • Can pause and resume work → avoids blocking the main thread.
2. Prioritization
   • High-priority tasks (e.g., user input, animations) get processed first.
   • Low-priority tasks (e.g., data fetching rendering) can be delayed.
3. Better User Experience
   • Prevents UI “freezing” during heavy updates.
   • Smooth animations and interactions.
4. Backwards Compatible
   • React Fiber works internally.
   • As a developer, you don’t need to change your code to use Fiber.

---

🔹 Example to Understand Fiber

Imagine you’re typing in a text box while React is also updating a huge list:

• Old React (Stack Reconciler) → Would finish updating the list first, then process typing → laggy UI.
• React Fiber → Pauses list update → processes your keystroke immediately → resumes list update later → smooth UI.

---

🔹 Visual Example (React Functional Component)

import React, { useState } from "react";

function FiberExample() {
  const [text, setText] = useState("");
  const [items, setItems] = useState(Array.from({ length: 5000 }, (_, i) => i));

  return (
    <div>
      {/* ✅ High priority (user input) handled first */}
      <input
        type="text"
        placeholder="Type here..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />

      {/* 🐢 Low priority (big list rendering) handled later */}
      <ul>
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default FiberExample;

👉 Thanks to React Fiber, typing in the input box feels smooth even while rendering thousands of list items.

---

🔹 Key Takeaways

• React Fiber = new reconciliation engine in React 16+.
• Supports asynchronous rendering, prioritization, and interruptible work.
• Improves performance & user experience.
• As developers, we just write normal React code → Fiber works internally.