What does the Fiber architecture do in React?
React Fiber makes rendering asynchronous, interruptible, and priority-driven, which lets React flexibly distribute work and update the UI without lag.
Before Fiber (React < 16)
React's rendering used to be synchronous and "blocking":
- When state changed, React recursively walked the entire component tree.
- If the tree was large, React could not stop partway.
- As a result, the browser "froze" until React finished working.
The problem: if the user is typing, scrolling, or moving the mouse while React is "busy" with a large re-render, the interface hangs.
What Fiber is
Fiber is a rewritten implementation of the Virtual DOM, where each component is represented as a separate node (Fiber node) with its own "mini-task".
You could say Fiber = "React's unit of work".
Now React:
- splits a large update into small pieces (fibers),
- runs them one after another,
- and can pause, resume, or cancel them depending on priority.
The main goals of Fiber
| Goal | What it gives |
|---|---|
| Asynchronous rendering | React can "take pauses" so it does not block the interface |
| Update priority | Important tasks (text input, animation) run first |
| Ability to resume | React can pause work and come back to it later |
| Incremental rendering | Large trees can be updated in pieces |
| Foundation for new features (Concurrent Mode, Suspense) | Implements "smart" control over rendering |
How this works step by step
- State change (
setState,useState) → React queues the update. - React starts the Render Phase (preparation phase):
- Creates "fiber nodes" for each component.
- Computes which parts need updating.
- May pause, if the browser has more important tasks.
- Once everything is ready → Commit Phase (application phase):
- React applies changes to the DOM in one batch.
Fiber in action (example)
Suppose you have 1000 cards, and React needs to re-render them.
-
Before (without Fiber): React rendered all 1000 one after another. The UI "froze" for 200-300 ms.
-
Now (with Fiber): React can say:
"I'll re-render 200 cards, then let the browser breathe, handle the scroll, then continue with the remaining 800."
This creates a feeling of smoothness and an absence of "lag".
The structure of a Fiber node
Each "fiber" stores information about the component:
| Property | What it stores |
|---|---|
type | The component's type (function, class, HTML element) |
key | The element's unique key |
pendingProps | The new props |
memoizedProps | The old props |
stateNode | The component instance itself (for classes) |
return, child, sibling | References to neighboring fiber nodes |
flags | What needs to be done (update, delete, add) |
alternate | A reference to the previous version of the node (for diffing) |
This makes updates happen at the node level, not across the whole tree.
Fiber and the rendering phases
React now clearly separates:
- Render phase (preparation):
- React builds a new tree of fiber nodes.
- It can be interrupted and resumed.
- Commit phase (application):
- React applies changes to the DOM.
- It cannot be interrupted.
Task priorities (the Scheduler)
Fiber uses a scheduler, which decides what to update first:
| Priority | Example |
|---|---|
| High | Text input, clicks, animations |
| Medium | Data updates, page transitions |
| Low | Background tasks, lazy-loading content |
React can temporarily defer low-priority tasks, to handle the critical ones first (input, scroll, and so on).
Fiber became the foundation for:
Concurrent Rendering - React can render several versions of the UI at once (for example, a "new" one and an "old" one).
Suspense - React can "pause" a component until its data has loaded.
Transitions (useTransition) - Lets updates be "soft" (without flickering).
Summary
| What Fiber does | Why it is needed |
|---|---|
| Splits rendering into small tasks | So it does not block the main thread |
| Lets rendering be paused and resumed | For a smooth, responsive UI |
| Adds priority to updates | So important tasks go first |
| Controls diffing and reconciliation | More flexibly and efficiently |
| Underlies Concurrent Mode and Suspense | New React 18+ capabilities |
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.