React Fiber is React’s internal rendering engine (introduced in React 16) that rewrote how React reconciles and renders updates to make the UI more responsive and interruptible.
🔹 Why React Fiber Was Introduced
Before Fiber, React used a synchronous, recursive render:
- Once rendering started, it couldn’t be paused
- Large updates caused UI jank
- No prioritization of updates
Fiber solves this by breaking rendering work into small units that can be paused, resumed, or abandoned.
🧠 What Is a “Fiber”?
A Fiber is a data structure (node) that represents:
- A React element
- Its state, props, effects
- Links to parent/child/sibling fibers
Think of it as a work unit React can schedule.
🔁 How Fiber Changes Rendering
Old (Stack Reconciler)
- Render everything in one go
- Blocking & non-interruptible
Fiber (Concurrent Reconciler)
- Breaks work into chunks
- Can pause and resume
- Can prioritize important updates
⏱️ Scheduling & Priorities
Fiber lets React prioritize updates:
| Priority | Examples |
|---|---|
| High | Typing, clicking |
| Medium | Animations |
| Low | Data fetching, background updates |
React can pause low-priority work to keep the app responsive.
🔄 Phases in Fiber Rendering
1️⃣ Render Phase (Interruptible)
- Builds the Fiber tree
- Calculates what changed
- Can be paused or restarted
2️⃣ Commit Phase (Non-interruptible)
- Applies changes to the DOM
- Runs effects
- Must finish once started
🔗 How Fiber Enables Modern React Features
Fiber is the foundation for:
- Concurrent Rendering
- Automatic Batching
- Suspense
- startTransition / useTransition
- Time-slicing
- Interruptible rendering
Hooks, Suspense, and concurrency would not exist without Fiber.
⚠️ Important Clarification
- Fiber is internal
- You don’t use it directly
- You benefit from it via React APIs
🎯 Short Interview Answer
React Fiber is the internal reconciliation engine that allows React to split rendering work into small units, prioritize updates, and pause or resume rendering. It enables features like concurrent rendering, Suspense, and smoother user experiences.
⭐ One-line summary
React Fiber makes React fast and responsive by scheduling, prioritizing, and interrupting rendering work.
