What is Fiber in the context of React 18?

ReactMiddle~3 min read

1. What React Fiber is - a simple definition

React Fiber is the new architecture of React's internal core, introduced in React 16 (and refined in React 18), responsible for coordinating rendering and managing updates in the component tree.

Where React used to simply walk the tree recursively and render everything synchronously at once, Fiber lets React:

split work into small tasks,
pause, resume, and cancel rendering,
prioritize updates (including asynchronous ones),
and enable Concurrent Rendering (implemented in React 18).

2. Why Fiber came about in the first place

Before React 16, React used the Stack Reconciler: it worked recursively and synchronously.

The problem: if the tree was large, React "froze" during rendering - until the whole tree finished rendering, the browser could not handle events, animations, and so on.

React Fiber solves this by turning rendering into a step-by-step, controllable cycle that can be paused and resumed.

3. What a "fiber" actually is

Every React element (a component, a DOM node, a hook, and so on) is represented in memory as a Fiber object - a small structure describing one "cell" of the tree.

Roughly like this (simplified):

javascript

{
  type: MyComponent,      // a reference to the component function/class
  stateNode: DOMElement,  // the real DOM node or instance
  child: Fiber,           // the first child fiber
  sibling: Fiber,         // the next sibling
  return: Fiber,          // the parent
  pendingProps: {...},    // the new props
  memoizedProps: {...},   // the old props
  alternate: Fiber,       // a reference to the previous version (for diffing)
  lanes: 1,               // priority / lane
}

So the whole React tree is a linked structure of Fiber nodes.

4. How rendering works with Fiber

Rendering in React 18 goes through two phases:

1. Render phase (building the new Fiber tree)

React builds the new Fiber tree (virtual nodes).
It computes which parts need updating.
This phase can be interrupted (in Concurrent Mode).

2. Commit phase (applying to the DOM)

React applies the changes to the real DOM.
This step is always synchronous (atomic).

Fiber is what makes the first phase "asynchronous" and interruptible.

5. Priorities and Concurrent Rendering (React 18)

React 18 added the Lanes system, which manages the priorities of Fiber tasks. Now React can:

Update user input immediately (useTransition, useDeferredValue),
Defer a lower-priority render (for example, lists or animations),
Resume an interrupted render without re-rendering the whole tree.

Concurrent Rendering = React's ability to prepare parts of the interface asynchronously, without blocking the main UI thread. Fiber is exactly what makes this possible.

6. An example of Fiber's "magic" in React 18

Say you have an input field with autosuggestions:

javascript

function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value);
    startTransition(() => {
      setResults(filterBigList(value));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <Results list={results} />}
    </>
  );
}

Fiber + Lanes let React:

handle the input (setQuery) immediately (high priority),
defer the heavy filtering (setResults) and run it asynchronously,
interrupt the filtering if needed, if the user types again.

Without Fiber, React would do all of this synchronously → lag and a "frozen" interface.

7. Fiber and the double tree (Current / Work In Progress)

React keeps two Fiber trees:

current - the currently displayed tree;
workInProgress - the new tree React builds while rendering.

After the render phase finishes, React swaps them during the commit phase.

This is how an instant and safe UI update is achieved.

8. What changed in React 18

System component	What was added / improved
Fiber architecture	Refined for asynchronous scheduling
Scheduler	A new task scheduler with priorities (Lanes)
Streaming SSR	Uses Fiber for asynchronous rendering on the server
Transitions API	Implemented on top of Fiber priorities
Suspense on the server	Support for "suspending" components through Fiber mechanics

Summary

React Fiber is the "brain" and "nervous system" of the React renderer.

What Fiber does	Why
Splits rendering into small parts	To avoid blocking the UI
Pauses and resumes work	For Concurrent Rendering
Assigns priorities to updates	So important actions happen sooner
Keeps a history of the previous state	For efficient diffing and rollback
Manages the commit phase	So the DOM updates safely and synchronously

In simpler terms: Fiber is the "React runtime" that makes asynchronous, prioritized, smooth rendering possible, and it is the foundation for all of React 18's modern features - from Concurrent Mode to Streaming SSR.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.