Suggest an edit

Improve this article

Refine the answer for “What does the Fiber architecture do in React?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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

1. **State change** (`setState`, `useState`) → React queues the update.
2. 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.
3. 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:

1. **Render phase (preparation):**
  - React builds a new tree of fiber nodes.
  - It can be **interrupted** and **resumed**.
2. **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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts756 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.