How does React Fiber work? | Interview Question

Q: How does React Fiber work?

**Target Audience:** Engineers preparing for senior React interviews — assumes reconciliation basics. **Difficulty:** Hard > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Sections 3 and 5 are **actual fiber nodes read out of a running React 19.2.8 tree** — React stores one on every DOM element it creates, and this doc walks it. Related: reconciliation for what the diff decides, and transitions for what the interruptibility buys. ## 1. Why This Even Matters — A Story First Imagine reading a 900-page book with no bookmark. If someone interrupts you, your only options are to finish the book or start again tomorrow from page one. Your position exists solely in your own head. Now put a bookmark in it. Your position is **an object in the worl

The problem

Question presented to candidate: "React Fiber is described as a rewrite of the reconciler. What actually changed, and why?"

What a strong answer should cover:

Fiber is React's internal representation of a unit of work — one JavaScript object per element in the tree, plus the reconciler that walks them.
The problem it solved: the old reconciler used recursion, so a render could not be interrupted. Once started, it ran to completion and blocked the main thread.
Fiber replaces recursion with a linked-list tree — each node has child, sibling and return pointers — which turns the traversal into a loop over an explicit structure rather than a call stack.
Because the position is data rather than stack frames, React can stop between units, yield to the browser, and resume later — that is what makes concurrent features possible.
Double buffering: React keeps a pair of fibers per position (current and alternate), building the next tree into the spare one, so the committed tree is never partially mutated.
Two phases: the render phase is interruptible and produces a list of effects; the commit phase is synchronous and applies them.
Each fiber carries memoizedState (the hooks linked list), memoizedProps, flags (what changed) and lanes (priority).
Fiber is an implementation detail — do not reach into it in application code.

Clarifying questions expected:

"Do you want the data structure, or the scheduling consequences?" — they are separable answers.

Code / implementation expected: No. Fiber is internal; describing the structure and what it enables is the answer.

fiber
architecture
reconciliation

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for senior React interviews — assumes reconciliation basics. Difficulty: Hard

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Sections 3 and 5 are actual fiber nodes read out of a running React 19.2.8 tree — React stores one on every DOM element it creates, and this doc walks it. Related: reconciliation for what the diff decides, and transitions for what the interruptibility buys.

1. Why This Even Matters — A Story First

Imagine reading a 900-page book with no bookmark. If someone interrupts you, your only options are to finish the book or start again tomorrow from page one. Your position exists solely in your own head.

Now put a bookmark in it. Your position is an object in the world, so you can stop mid-chapter, deal with the interruption, and pick up exactly whe

The solution is hidden so you can try first

8 min read · 9 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactReading a real fiber off a DOM node and walking its pointers

Open in playground

import { useState, useRef } from "react";

// NOTE: this reaches into a React INTERNAL to make the structure visible.
// Never do this in application code — the property name is deliberately
// randomised, the shape changes between versions, and none of it is public.
function fiberOf(node) {
  const key = Object.keys(node).find((k) => k.startsWith("__reactFiber$"));
  return key ? node[key] : null;
}

const nameOf = (f) =>
  !f ? "null" : typeof f.type === "function" ? (f.type.name || "anonymous") : String(f.type);

function Leaf() {
  return <span>leaf</span>;
}

export default function App() {
  const probe = useRef(null);
  const [n, setN] = useState(0);
  const [out, setOut] = useState([]);

  const inspect = () => {
    const fiber = fiberOf(probe.current);
    if (!fiber) return setOut(["no fiber found — React internals may have changed"]);

    // Walk the children: child, then follow sibling. There is no array.
    const kids = [];
    for (let c = fiber.child; c; c = c.sibling) kids.push(nameOf(c));

    setOut([
      "fiber.tag:    " + fiber.tag + "   (5 = host component, a real DOM element)",
      "fiber.type:   " + JSON.stringify(fiber.type),
      "",
      "children, reached via child -> sibling:",
      "  " + kids.join(" -> "),
      "parent, reached via return:",
      "  " + nameOf(fiber.return),
      "",
      "alternate:                    " + (fiber.alternate ? "a paired fiber" : "null (none yet)"),
      "alternate.alternate === it?   " + (fiber.alternate ? String(fiber.alternate.alternate === fiber) : "n/a"),
      "",
      "fields present: " +
        ["child", "sibling", "return", "memoizedState", "memoizedProps", "alternate", "flags", "lanes"]
          .filter((f) => f in fiber)
          .join(", "),
    ]);
  };

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 600 }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        <button onClick={inspect}>read the fiber</button>
        <button onClick={() => setN((v) => v + 1)}>re-render ({n})</button>
      </div>

      {/* The node whose fiber we read. It has two children of different kinds. */}
      <div ref={probe} id="probe" style={{ border: "1px dashed #aaa", borderRadius: 8, padding: 10 }}>
        <Leaf />
        <b> · render count {n}</b>
      </div>

      <pre style={{ background: "#f6f6f8", padding: 10, borderRadius: 8, fontSize: 12, marginTop: 12, minHeight: 190 }}>
{out.length ? out.join("\n") : "press 'read the fiber'"}
      </pre>

      <p style={{ fontSize: 13, color: "#666" }}>
        Read it once, then press re-render and read it again: <code>alternate</code>
        starts as null and appears after the first update — React allocates the
        second buffer lazily. Note there is no children array anywhere; the
        second child is reached by following <code>sibling</code>.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.