What is "Fiber architecture"?

#Short answer

Fiber architecture is an internal mechanism of React (introduced in React 16) that manages the component rendering process.

It allows React to:

• split updates into parts,
• pause and resume rendering,
• give priority to more important tasks,
• and keep the interface responsive even under heavy computation.

---

#Why this was needed

Before React 16, React used a stack-based recursive architecture:

• When the component tree needed an update, React traversed the entire tree recursively, from start to finish.
• If a component was heavy or the tree was large, the browser would "freeze" for a fraction of a second.

This meant freezes, dropped FPS, a "janky" UI.

---

#The problem with "old React"

Imagine:

• You have a complex application with hundreds of components;
• The user types something into an input;
• React starts recalculating the entire component tree;
• Until it finishes, nothing else in the browser can happen (including clicks and animations).

This was synchronous and non-interruptible.

---

#What Fiber does

React Fiber solves this problem by turning the rendering process into a cooperative, asynchronous one. Now React can:

1. Split an update into small units of work;
2. Execute them step by step;
3. Stop and resume if the browser needs to do something more important (for example, handle user input);
4. Assign priorities to tasks.

In other words, Fiber is a mechanism for "scheduled" rendering.

---

#What "Fiber" literally is

"Fiber" is an object representing a unit of work (one node of the component tree).

Internally, every React component is now represented as a Fiber node, in which React stores:

• a reference to the component's type (function, class, HostComponent, etc.);
• its props, state, ref, return, sibling, child;
• the update priority (urgent / not urgent);
• and information about whether it had an error or an effect.

In essence, it's a new data structure describing the render tree.

---

#How Fiber works (step by step)

1. React receives a signal that the UI needs to be updated (for example, state changed).
2. React creates a new "Fiber tree", copying the old one and updating the changed parts.
3. This tree is processed in two phases:

---

#1. Render phase (computation phase)

• React recursively builds a new Fiber tree;
• calculates what has changed;
• can pause or interrupt this process;
• the result is a "list of changes" that need to be applied to the DOM.

This phase can be interrupted and resumed (asynchronous).

---

#2. Commit phase (application phase)

• React applies the changes to the real DOM;
• calls useEffect, componentDidMount, componentDidUpdate, etc.

This phase is always synchronous and non-interruptible (to avoid "torn" UI states).

---

#Advantages of Fiber Architecture

---

#Fiber and Concurrent Rendering

Thanks to Fiber, React 18 got Concurrent Rendering, a way to render parts of the interface asynchronously and with priorities.

Examples:

• startTransition() - defers unimportant updates;
• useDeferredValue() - keeps the UI from "jumping" during fast input;
• Suspense - deferred rendering with "placeholders".

All of this became possible only because of Fiber.

---

#Visual analogy

Imagine React as a painter:

• Before Fiber: the painter paints the whole picture at once, without lifting their head, until it's finished. Even if you call out to them, they don't react.
• With Fiber: the painter paints in parts, can stop to answer a question or make coffee, and then continues from where they left off.

---

#Summary

---

Final definition:

React Fiber is a new implementation of React's core that makes rendering step-by-step, priority-based, and interruptible, providing a smooth, responsive interface even under large updates.