Fiber: React's unit of work

A fiber for every piece of the page

Earlier lessons said that React "keeps track" of your components: which state belongs to which one, and what it showed last time. This lesson opens that up. For every component and every element on the page, React keeps a plain JavaScript object called a fiber. You can reach one from the page. Click the button.

1import { useState } from "react";2 3export default function App() {4  const [report, setReport] = useState("Click the button.");5 6  function inspect(event) {7    const button = event.currentTarget;8    const key = Object.keys(button).find((name) => name.startsWith("__reactFiber$"));9    const fiber = button[key];10    setReport(`tag ${fiber.tag}, type "${fiber.type}", its parent is a <${fiber.return.type}>`);11  }12 13  return (14    <section>15      <h2>Your cart</h2>16      <button onClick={inspect}>Find my fiber</button>17      <p>{report}</p>18    </section>19  );20}

Line 7 takes the button element you clicked. Line 8 looks through the element's own keys for one that starts with __reactFiber$: react-dom adds that key to every DOM element it creates. Line 9 reads it, and line 10 shows three of its fields. The result reads tag 5, type "button", its parent is a <section>.

The key's name comes from ReactDOMComponentTree.js, lines 43 and 44:

const randomKey = Math.random().toString(36).slice(2);
const internalInstanceKey = '__reactFiber$' + randomKey;

Line 1 makes a few random letters once, when react-dom loads. Line 2 adds them to __reactFiber$. The name is different on every page load, which is why line 8 of the example searches for the start of the name instead of writing it out. When react-dom creates a DOM element, it stores the element's fiber under that key (precacheFiberNode, line 110), so that a click on the element can find its way back to React.

What a fiber is: tag, type, key and stateNode

Every fiber is made by one constructor, FiberNode, in ReactFiber.js. The source uses Flow, a type checker like TypeScript, so read past the text after each colon. Here is how it starts:

function FiberNode(
  this: $FlowFixMe,
  tag: WorkTag,
  pendingProps: mixed,
  key: ReactKey,
  mode: TypeOfMode,
) {
  // Instance
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;

In plain words, line by line:

1. Lines 1 to 7 take four values: the tag, the props for this render, the key, and a mode (bits such as "this tree is in StrictMode"). this: $FlowFixMe is only a note for Flow, not a value.
2. Line 8 starts the group of fields that say what this piece is.
3. Line 9 stores the tag: a number for the kind of fiber, such as a function component or a DOM element.
4. Line 10 stores the key you wrote in JSX, like key="tea", or null.
5. Lines 11 and 12 start elementType and type empty. The function that makes a fiber from an element fills them in: the component function, like CartItem, or the tag name, like "li". The two are the same for everything in this lesson. They differ for a few wrapped components, such as one made with lazy.
6. Line 13 starts stateNode empty. It will hold the object the fiber stands for outside React: for a DOM element, the real DOM node.

The tag numbers are in ReactWorkTags.js, which calls them work tags: the tag decides which work React does for the fiber. Here are the first eight:

export const FunctionComponent = 0;
export const ClassComponent = 1;
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
export const HostComponent = 5;
export const HostText = 6;
export const Fragment = 7;
export const Mode = 8;

There are 30 in all, one for each kind of thing React can render, such as SuspenseComponent (13) and MemoComponent (14). How to read the table: each row is a tag you meet in every app, what you write to get it, and what its stateNode holds.

Now look at real ones. The example below is a fiber inspector. Click Tea $3 in the cart, then press Go to its return again and again.

1import { useState } from "react";2import { describeNode, fiberOf, nameOf, tagNames } from "./fiber.js";3 4function CartItem({ name, price }) {5  return <li>{name + " $" + price}</li>;6}7 8export default function App() {9  const [fiber, setFiber] = useState(null);10 11  return (12    <>13      <section onClick={(event) => setFiber(fiberOf(event.target))}>14        <h2>Your cart</h2>15        <ul>16          <CartItem key="tea" name="Tea" price={3} />17          <CartItem key="cake" name="Cake" price={4} />18        </ul>19        <button>Checkout</button>20      </section>21      {fiber ? (22        <dl>23          <dt>tag</dt>24          <dd>{fiber.tag} ({tagNames[fiber.tag] ?? "another kind"})</dd>25          <dt>type</dt>26          <dd>{nameOf(fiber)}</dd>27          <dt>key</dt>28          <dd>{String(fiber.key)}</dd>29          <dt>stateNode</dt>30          <dd>{describeNode(fiber.stateNode)}</dd>31        </dl>32      ) : (33        <p>Click anything in the cart.</p>34      )}35      {fiber?.return && <button onClick={() => setFiber(fiber.return)}>Go to its return: {nameOf(fiber.return)}</button>}36    </>37  );38}

Line 13 reads the fiber of whatever you clicked, with fiberOf from the fiber.js tab (lines 15 to 18 there, the same search as before). Lines 21 to 31 show four fields, and line 35 moves to the fiber's return, its parent. Starting from Tea, the climb goes:

1. li: tag 5, HostComponent. Its stateNode is the <li> on the page.
2. CartItem: tag 0, FunctionComponent, key tea, and stateNode null. A function component has no DOM node of its own; the li it returns is its child.
3. ul, then section, then App: two elements and your component.
4. Mode, tag 8: the <StrictMode> that every live example's main.jsx wraps around App.
5. HostRoot, tag 3: the top of the tree. Its stateNode is the FiberRoot, and its return is null, so the button disappears. The root section below explains it.

How to read the second table: it groups all of a fiber's main fields by the question they answer. The rest of the lesson takes the groups one at a time.

child, sibling and return: a tree made of links

You might expect each fiber to hold an array of its children. It doesn't. Here is how the Fiber type describes the links, in ReactInternalTypes.js:

  // The Fiber to return to after finishing processing this one.
  // This is effectively the parent, but there can be multiple parents (two)
  // so this is only the parent of the thing we're currently processing.
  // It is conceptually the same as the return address of a stack frame.
  return: Fiber | null,

  // Singly Linked List Tree Structure.
  child: Fiber | null,
  sibling: Fiber | null,
  index: number,

1. Lines 1 to 4 explain return: the fiber to go back to after this one is done, which is its parent. The comment compares it to the return address of a stack frame, the place a function goes back to when it returns (the call stack lesson shows those).
2. Line 5 is return: the parent fiber, or null at the top.
3. Line 7 names the shape: a singly linked list, where each item points only at the next one.
4. Line 8 is child: the first child only.
5. Line 9 is sibling: the next child of the same parent, or null after the last one.
6. Line 10 is index: the fiber's place among its siblings, 0 for the first.

Why links instead of arrays? With three links, React can get from any fiber to the next one with a single variable, and it can stop between any two fibers and pick up again later from that variable alone. The next lesson, the work loop, is built on exactly that. Walk the links yourself:

function CartItem({ name, price }) {
  return <li>{name + " $" + price}</li>;
}

function Cart() {
  return (
    <section>
      <h2>Your cart</h2>
      <ul>
        <CartItem key="tea" name="Tea" price={3} />
        <CartItem key="cake" name="Cake" price={4} />
      </ul>
      <p>Total: $7</p>
    </section>
  );
}

Press Follow child twice: from Cart to its section, then to the h2. Press it a third time: the h2 has no child fiber, because its only content is text, which React sets on the element instead of making a fiber for it. Press Follow sibling to reach the ul, and Follow return to climb back to the section. The list under the cart is every fiber below Cart, found with nothing but these three fields, in the order React starts work on them.

What a fiber remembers: props, state and updates

A fiber outlives the render that made it, so it's where React keeps what a component needs next time. Four fields hold it, in ReactInternalTypes.js:

  // Input is the data coming into process this fiber. Arguments. Props.
  pendingProps: any, // This type will be more specific once we overload the tag.
  memoizedProps: any, // The props used to create the output.

  // A queue of state updates and callbacks.
  updateQueue: mixed,

  // The state used to create the output
  memoizedState: any,

1. Lines 1 and 2: pendingProps are the props for the render in progress, the "input" of this piece of work.
2. Line 3: memoizedProps are the props of the last finished render. "Memoized" means remembered. Comparing the two is how React notices that a parent passed something new.
3. Lines 5 and 6: updateQueue holds waiting work. For the root, it holds the waiting root.render calls. A function component keeps its waiting state updates in each hook instead, and uses updateQueue for its effects.
4. Lines 8 and 9: memoizedState is the state the last render used. For a function component, that's its hooks.

Press Add one twice, then Read my fiber.

1import { useState } from "react";2import { fiberOf, onScreen } from "./fiber.js";3 4function CartItem({ name, price }) {5  const [quantity, setQuantity] = useState(1);6  const [note] = useState("gift wrap");7  const [report, setReport] = useState([]);8 9  function read(event) {10    let fiber = fiberOf(event.currentTarget);11    while (fiber.type !== CartItem) fiber = fiber.return;12    fiber = onScreen(fiber);13    const hook = fiber.memoizedState;14    setReport([15      `memoizedProps: ${JSON.stringify(fiber.memoizedProps)}`,16      `first hook: ${hook.memoizedState}`,17      `second hook: ${hook.next.memoizedState}`,18    ]);19  }20 21  return (22    <li>23      {name} ${price}, quantity {quantity}, {note}24      <button onClick={() => setQuantity(quantity + 1)}>Add one</button>25      <button onClick={read}>Read my fiber</button>26      {report.map((line) => <p key={line}>{line}</p>)}27    </li>28  );29}30 31export default function App() {32  return (33    <ul>34      <CartItem name="Tea" price={3} />35    </ul>36  );37}

Lines 10 and 11 start at the button's fiber and climb return until they reach the fiber whose type is CartItem. Line 12 makes sure it's the copy on screen; the double-buffering section below explains why there are two. Line 13 reads memoizedState. The result shows:

• memoizedProps: {"name":"Tea","price":3}: the props from line 34.
• first hook: 3: the quantity from line 5, after your two clicks.
• second hook: gift wrap: line 17 follows next from the first hook to the second, from line 6.

So a function component's memoizedState is its first hook, and each hook points at the next one: a linked list in the order you call them. That's why hooks must run in the same order every render (the Rules of Hooks lesson), and the how hooks work inside lesson reads that list in detail. It also explains preserving and resetting state: state belongs to a place in the tree because it lives on the fiber in that place. When React removes the fiber, the state goes with it.

The root: FiberRoot and the HostRoot fiber

The climb in the inspector ended at a fiber with tag 3 whose stateNode was "the FiberRoot". These are two different objects, and createRoot makes both. The FiberRoot isn't a fiber. It holds what React needs for the whole root, in ReactInternalTypes.js:

type BaseFiberRootProperties = {
  // The type of root (legacy, batched, concurrent, etc.)
  tag: RootTag,

  // Any additional information from the host associated with this root.
  containerInfo: Container,
  // Used only by persistent updates.
  pendingChildren: any,
  // The currently active root fiber. This is the mutable root of the tree.
  current: Fiber,

1. Line 3: its own tag, a root tag, not a work tag. createRoot always makes a concurrent root.
2. Line 6: containerInfo, the DOM element you passed to createRoot: your <div id="root">.
3. Line 8: a field only some renderers use.
4. Lines 9 and 10: current, "the currently active root fiber": the top fiber of the tree on screen.

That top fiber is the HostRoot fiber, tag 3. createFiberRoot joins the two, in ReactFiberRoot.js:

  // Cyclic construction. This cheats the type system right now because
  // stateNode is any.
  const uninitializedFiber = createHostRootFiber(tag, isStrictMode);
  root.current = uninitializedFiber;
  uninitializedFiber.stateNode = root;

Line 3 makes the HostRoot fiber. Line 4 points the FiberRoot's current at it, and line 5 points the fiber's stateNode back at the FiberRoot. The comment on lines 1 and 2 calls this a cyclic construction: each one points at the other. Then createRoot stores that HostRoot fiber on your container under a second key, __reactContainer$ (ReactDOMRoot.js, line 252). Click Look at the root, then click it again.

1import { useState } from "react";2import { nameOf } from "./fiber.js";3 4export default function App() {5  const [lines, setLines] = useState([]);6 7  function look() {8    const container = document.getElementById("root");9    const key = Object.keys(container).find((name) => name.startsWith("__reactContainer$"));10    const hostRoot = container[key];11    const fiberRoot = hostRoot.stateNode;12    setLines([13      `hostRoot.tag: ${hostRoot.tag}`,14      `fiberRoot.containerInfo is the #root div: ${fiberRoot.containerInfo === container}`,15      `below the root: ${nameOf(fiberRoot.current.child)}, then ${nameOf(fiberRoot.current.child.child)}`,16      `this HostRoot fiber is the current one: ${fiberRoot.current === hostRoot}`,17    ]);18  }19 20  return (21    <>22      <button onClick={look}>Look at the root</button>23      <ul>24        {lines.map((line) => <li key={line}>{line}</li>)}25      </ul>26    </>27  );28}

Lines 8 to 10 read the HostRoot fiber from the container, and line 11 follows its stateNode to the FiberRoot. The first click lists:

• hostRoot.tag: 3 (line 13).
• fiberRoot.containerInfo is the #root div: true (line 14).
• below the root: Mode, then App (line 15): the root's child is the StrictMode fiber, and its child is App.
• this HostRoot fiber is the current one: false (line 16).

The last line is the surprise. The container still holds the HostRoot fiber that createRoot made, yet the FiberRoot's current points at a different one. Click again and it says true; again, and it says false. Each click sets state, so React renders and commits, and every commit moves current. There are two HostRoot fibers, and they take turns.

Two trees: current and work-in-progress

React never changes the fibers on screen while it renders. It renders into a second copy of the tree, the work-in-progress tree, and the copy on screen is the current tree. Each fiber in one tree points at its twin in the other through alternate. Before React works on a fiber, it gets the twin from createWorkInProgress, in ReactFiber.js:

export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
  let workInProgress = current.alternate;
  if (workInProgress === null) {
    // We use a double buffering pooling technique because we know that we'll
    // only ever need at most two versions of a tree. We pool the "other" unused
    // node that we're free to reuse. This is lazily created to avoid allocating
    // extra objects for things that are never updated. It also allow us to
    // reclaim the extra memory if needed.
    workInProgress = createFiber(
      current.tag,
      pendingProps,
      current.key,
      current.mode,
    );
    workInProgress.elementType = current.elementType;
    workInProgress.type = current.type;
    workInProgress.stateNode = current.stateNode;
    // ... (development-only fields left out)
    workInProgress.alternate = current;
    current.alternate = workInProgress;
  } else {
    workInProgress.pendingProps = pendingProps;
    // Needed because Blocks store data on type.
    workInProgress.type = current.type;

    // We already have an alternate.
    // Reset the effect tag.
    workInProgress.flags = NoFlags;

    // The effects are no longer valid.
    workInProgress.subtreeFlags = NoFlags;
    workInProgress.deletions = null;
    // ... (two branches for experimental and profiling builds left out)
  }

  // Reset all effects except static ones.
  // Static effects are not specific to a render.
  workInProgress.flags = current.flags & StaticMask;
  workInProgress.childLanes = current.childLanes;
  workInProgress.lanes = current.lanes;

  workInProgress.child = current.child;
  workInProgress.memoizedProps = current.memoizedProps;
  workInProgress.memoizedState = current.memoizedState;
  workInProgress.updateQueue = current.updateQueue;

1. Lines 1 and 2 take the current fiber and look at its alternate.
2. Lines 3 to 17 run when there is no twin yet, the first time this fiber is updated. Lines 9 to 17 make one with the same tag, key, mode, type and stateNode: one DOM element, two fibers. The comment on lines 4 to 8 names the technique, double buffering: React only ever needs two versions of the tree, and it makes the second one only when a fiber is updated.
3. Lines 19 and 20 link the two, both ways.
4. Lines 21 to 32 run when the twin already exists: React reuses it, gives it the new props, and clears what was left from its last render.
5. Lines 36 to 45 copy from the current fiber: its lanes, its first child, its props, its state and its update queue. The render then works on this copy, and the current fiber stays as it was.

You can watch one element's two fibers take turns. The example reads the fiber of the <strong> after every commit. Click Add tea three times and read the three lines each time.

1import { useLayoutEffect, useRef, useState } from "react";2import { fiberOf } from "./fiber.js";3 4export default function App() {5  const [count, setCount] = useState(0);6  const countRef = useRef(null);7  const reportRef = useRef(null);8 9  useLayoutEffect(() => {10    const fiber = fiberOf(countRef.current);11    const other = fiber.alternate;12    reportRef.current.textContent = [13      `The <strong>'s fiber remembers ${fiber.memoizedProps.children}.`,14      `Its alternate remembers ${other ? other.memoizedProps.children : "nothing: there is none yet"}.`,15      `Each is the other's alternate: ${other ? other.alternate === fiber : "not yet"}.`,16    ].join("\n");17  });18 19  return (20    <div>21      <p>Items in cart: <strong ref={countRef}>{count}</strong></p>22      <button onClick={() => setCount(count + 1)}>Add tea</button>23      <pre ref={reportRef} />24    </div>25  );26}

The layout effect on lines 9 to 17 runs after every commit. Line 10 reads the fiber the DOM element points at, and line 11 its alternate. Here is what the lines say:

1. Before any click: the fiber remembers 0, and there is no alternate yet. Nothing has been updated.
2. After click 1: the fiber still remembers 0, and its alternate remembers 1. React made a twin for the render and committed it. The DOM element points at the fiber that created it, which is now the old copy.
3. After click 2: the fiber remembers 2, and its alternate 1. React reused the old copy for this render, as lines 21 to 32 of createWorkInProgress do.
4. After click 3: 2 and 3. They keep taking turns, and line 15 shows that each one is the other's alternate.

That's also why the fiber.js tab has onScreen (its lines 39 to 43): to read state you need the copy whose tree the FiberRoot's current points at. React's own version, findCurrentFiberUsingSlowPath, handles more cases. The switch itself is one line in the commit, in ReactFiberWorkLoop.js:

  // The work-in-progress tree is now the current tree. This must come after
  // the mutation phase, so that the previous tree is still current during
  // componentWillUnmount, but before the layout phase, so that the finished
  // work is current during componentDidMount/Update.
  root.current = finishedWork;

Line 5 is the swap. The comment says when it happens: after React has changed the DOM (the "mutation phase"), and before it runs layout effects, so a layout effect already sees the new tree as current. The commit phase lesson goes through those phases.

Why two trees? While React fills in the work-in-progress tree, the current tree still matches the screen exactly. If the render stops halfway, as a transition's render can, or React throws it away, nothing on screen has changed and nothing is lost. When the render is done, the commit changes the DOM and moves one pointer.

Flags and lanes: notes for the next steps

The last fields FiberNode sets in every build are notes about work: what the commit must do, and which updates are waiting. (Profiling and development builds add a few timing and debugging fields after them.) From ReactFiber.js:

  // Effects
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  this.alternate = null;

1. Line 2: flags, the changes the commit must make for this fiber.
2. Line 3: subtreeFlags, every flag of every fiber below it, collected together.
3. Line 4: deletions, the child fibers to remove.
4. Lines 6 and 7: lanes, the updates waiting on this fiber, and childLanes, the ones waiting anywhere below it.
5. Line 9: alternate, its twin, from the section above.

Flags and lanes are numbers used as rows of switches: each bit means one thing. These are the first flags, in ReactFiberFlags.js:

// Don't change these values. They're used by React Dev Tools.
export const NoFlags = /*                      */ 0b0000000000000000000000000000000;
export const PerformedWork = /*                */ 0b0000000000000000000000000000001;
export const Placement = /*                    */ 0b0000000000000000000000000000010;
export const DidCapture = /*                   */ 0b0000000000000000000000010000000;
export const Hydrating = /*                    */ 0b0000000000000000001000000000000;

// You can change the rest (and add more).
export const Update = /*                       */ 0b0000000000000000000000000000100;
export const Cloned = /*                       */ 0b0000000000000000000000000001000;

export const ChildDeletion = /*                */ 0b0000000000000000000000000010000;

Each value is written in binary (0b) with a single 1 in it. Line 4, Placement, means "insert this node into the DOM". Line 9, Update, means "change this node". Line 12, ChildDeletion, means "remove some children". React turns bits on and off with JavaScript's bitwise operators (the other operators lesson covers them). Here are the same operators on the same values:

const Placement = 0b10;
const Update = 0b100;
const ChildDeletion = 0b10000;

let flags = 0;
flags |= Placement;
flags |= Update;

console.log(flags);
console.log((flags & Update) !== 0);
console.log((flags & ChildDeletion) !== 0);
flags &= ~Placement;
console.log(flags);

Lines 6 and 7 turn on two bits with |=, so line 9 prints 6: 2 plus 4. Line 10 asks whether the Update bit is on with & and prints true; line 11 asks about ChildDeletion and prints false. Line 12 turns Placement off with &= ~, so line 13 prints 4. One number holds many yes-or-no answers, and React can check one or combine many in a single step.

The picture shows why the subtree and child versions exist. When the render finishes a fiber, it adds the fiber's flags to its parent's subtreeFlags. The commit can then skip any part of the tree whose subtreeFlags is 0. childLanes does the same job for the render: an update marks its own fiber's lanes and every parent's childLanes, so React can skip every part of the tree with no work waiting. The work loop lesson shows the render collecting both and skipping with childLanes; the commit phase lesson shows the commit skipping with subtreeFlags.

Lanes are bits too. Each one is a priority, from ReactFiberLane.js:

export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;

export const SyncHydrationLane: Lane = /*               */ 0b0000000000000000000000000000001;
export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000010;
export const SyncLaneIndex: number = 1;

export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000100;
export const InputContinuousLane: Lane = /*             */ 0b0000000000000000000000000001000;

export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000010000;
export const DefaultLane: Lane = /*                     */ 0b0000000000000000000000000100000;

Line 5 is SyncLane, 2, for updates from clicks and other discrete events. Line 12 is DefaultLane, 32, for updates from other places, such as a timer. Transitions get lanes of their own, starting at TransitionLane1, 256. Watch a set function mark a lane: click Add tea, then Add tea in a transition twice.

1import { startTransition, useState } from "react";2import { fiberOf, onScreen } from "./fiber.js";3 4function lanesOf(event) {5  let fiber = fiberOf(event.currentTarget);6  while (fiber.type !== App) fiber = fiber.return;7  return onScreen(fiber).lanes.toString(2);8}9 10export default function App() {11  const [count, setCount] = useState(0);12  const [seen, setSeen] = useState("Click a button.");13 14  function addNow(event) {15    setCount(count + 1);16    setSeen(`After setCount in a click, App's lanes: ${lanesOf(event)}`);17  }18 19  function addInTransition(event) {20    startTransition(() => setCount(count + 1));21    setSeen(`After setCount in a transition, App's lanes: ${lanesOf(event)}`);22  }23 24  return (25    <>26      <p>Items in cart: {count}</p>27      <button onClick={addNow}>Add tea</button>28      <button onClick={addInTransition}>Add tea in a transition</button>29      <p>{seen}</p>30    </>31  );32}

Lines 4 to 8 climb from the button to App's fiber and return its lanes in binary. Line 15 calls setCount, and line 16 reads the lanes right after, while the click handler is still running and before React renders: 10, the SyncLane bit. Line 20 calls it inside startTransition, and line 21 reads 100000000, TransitionLane1. Click it again and the 1 moves one place left: React hands each new transition the next transition lane. The render then clears the lanes it handled. The lanes lesson explains how React picks and groups them.

Which component drew this button?

A real use for all this: you see a button on a big page and want to know which component rendered it. The return path answers it. Click anything in the shop.

1import { useState } from "react";2import { fiberOf } from "./fiber.js";3 4function componentPath(node) {5  const names = [];6  for (let fiber = fiberOf(node); fiber !== null; fiber = fiber.return) {7    if (typeof fiber.type === "function") names.unshift(fiber.type.name);8  }9  return names.join(" > ");10}11 12function Price({ value }) {13  return <strong>${value}</strong>;14}15 16function AddButton({ name }) {17  return <button>Add {name}</button>;18}19 20function ProductCard({ name, price }) {21  return (22    <article>23      <h3>{name}</h3>24      <Price value={price} />25      <AddButton name={name} />26    </article>27  );28}29 30export default function App() {31  const [path, setPath] = useState("Click anything in the shop.");32 33  return (34    <div onClick={(event) => setPath(componentPath(event.target))}>35      <ProductCard name="Tea" price={3} />36      <ProductCard name="Cake" price={4} />37      <p>{path}</p>38    </div>39  );40}

Lines 4 to 10 start at the clicked element's fiber and climb return to the top. Line 7 keeps only the fibers whose type is a function, the components, and puts each name in front. Click Add Tea and the result reads App > ProductCard > AddButton. Click the $4 and it reads App > ProductCard > Price. The <article> and <h3> fibers are on the path too; line 7 skips them.

When you read React's source, you'll see these fields everywhere. Sort each question by the field that answers it.

Common mix-ups

• "A fiber is the same thing as a React element." No. An element is the frozen description your component returns, made again on every render (the React elements lesson). A fiber is React's own object for that place in the tree, kept and changed across renders.
• "React makes new fibers on every render." No. It reuses them. Each fiber has at most one twin, its alternate, and createWorkInProgress reuses the twin for the next render.
• "A fiber keeps its children in an array." No. It points at its first child; the others follow through sibling, and each points back with return.
• "A DOM element always points at the fiber on screen." No. It points at the fiber that created it. After an update, that can be the old copy, as the two-trees example shows.
• "The FiberRoot is the top fiber." No. The top fiber is the HostRoot fiber, tag 3. The FiberRoot is a separate object that isn't a fiber, and its current points at the HostRoot fiber on screen.
• "Fiber means React renders on another thread." No. React renders on the main thread. Fibers let it do the work in small pieces, one fiber at a time, and stop between them.
• "Reading __reactFiber$ is a handy trick for apps." No. The fields are private and change between versions. Use them to learn and debug, and use React DevTools in real work.

How to read the table: each row asks one question of a React element and of a fiber.

Practice exercises

import { useState } from "react";

function Badge() {
  return <span>New</span>;
}

export default function App() {
  const [answer, setAnswer] = useState("Click the badge.");

  function check(event) {
    const span = event.target;
    const key = Object.keys(span).find((name) => name.startsWith("__reactFiber$"));
    const fiber = span[key];
    setAnswer(`${fiber.tag} and ${fiber.return.tag}`);
  }

  return (
    <p onClick={check}>
      <Badge /> {answer}
    </p>
  );
}

import { useState } from "react";

function Badge() {
  return <span>New</span>;
}

export default function App() {
  const [answer, setAnswer] = useState("Click the badge.");

  function check(event) {
    const span = event.target;
    const key = Object.keys(span).find((name) => name.startsWith("__reactFiber$"));
    const fiber = span[key];
    setAnswer(`${fiber.tag} and ${fiber.return.tag}`);
  }

  return (
    <p onClick={check}>
      <Badge /> {answer}
    </p>
  );
}

import { useState } from "react";

export default function App() {
  const [answer, setAnswer] = useState("Click Mint.");

  function check(event) {
    const li = event.target;
    const key = Object.keys(li).find((name) => name.startsWith("__reactFiber$"));
    setAnswer(`index ${li[key].index}, key ${li[key].key}`);
  }

  return (
    <>
      <ul onClick={check}>
        {["Tea", "Cake", "Mint"].map((name) => <li key={name.toLowerCase()}>{name}</li>)}
      </ul>
      <p>{answer}</p>
    </>
  );
}

import { useState } from "react";

export default function App() {
  const [answer, setAnswer] = useState("Click Mint.");

  function check(event) {
    const li = event.target;
    const key = Object.keys(li).find((name) => name.startsWith("__reactFiber$"));
    setAnswer(`index ${li[key].index}, key ${li[key].key}`);
  }

  return (
    <>
      <ul onClick={check}>
        {["Tea", "Cake", "Mint"].map((name) => <li key={name.toLowerCase()}>{name}</li>)}
      </ul>
      <p>{answer}</p>
    </>
  );
}

1import { useState } from "react";2 3function fiberOf(node) {4  const key = Object.keys(node).find((name) => name.startsWith("__reactFiber$"));5  return node[key];6}7 8// TODO: return the key of every child fiber of `fiber`, in order.9function childKeys(fiber) {10  return [];11}12 13export default function App() {14  const [keys, setKeys] = useState([]);15 16  return (17    <>18      <ul onClick={(event) => setKeys(childKeys(fiberOf(event.currentTarget)))}>19        <li key="tea">Tea</li>20        <li key="cake">Cake</li>21        <li key="mint">Mint</li>22      </ul>23      <p>Child keys: {keys.join(", ")}</p>24    </>25  );26}

1import { useState } from "react";2 3function fiberOf(node) {4  const key = Object.keys(node).find((name) => name.startsWith("__reactFiber$"));5  return node[key];6}7 8function childKeys(fiber) {9  const keys = [];10  for (let child = fiber.child; child !== null; child = child.sibling) {11    keys.push(child.key);12  }13  return keys;14}15 16export default function App() {17  const [keys, setKeys] = useState([]);18 19  return (20    <>21      <ul onClick={(event) => setKeys(childKeys(fiberOf(event.currentTarget)))}>22        <li key="tea">Tea</li>23        <li key="cake">Cake</li>24        <li key="mint">Mint</li>25      </ul>26      <p>Child keys: {keys.join(", ")}</p>27    </>28  );29}

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [seen, setSeen] = useState([]);

  function check(event) {
    const button = event.currentTarget;
    const key = Object.keys(button).find((name) => name.startsWith("__reactFiber$"));
    setSeen([...seen, button[key].alternate === null]);
    setCount(count + 1);
  }

  return (
    <button onClick={check}>
      Clicked {count} times. No alternate yet: {seen.join(", ")}
    </button>
  );
}

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [seen, setSeen] = useState([]);

  function check(event) {
    const button = event.currentTarget;
    const key = Object.keys(button).find((name) => name.startsWith("__reactFiber$"));
    setSeen([...seen, button[key].alternate === null]);
    setCount(count + 1);
  }

  return (
    <button onClick={check}>
      Clicked {count} times. No alternate yet: {seen.join(", ")}
    </button>
  );
}

1import { useState } from "react";2 3// TODO: count every fiber from root down, without recursion:4// child to go down, sibling to go right, return to go back up.5function countFibers(root) {6  return 0;7}8 9export default function App() {10  const [count, setCount] = useState(null);11 12  function countAll() {13    const container = document.getElementById("root");14    const key = Object.keys(container).find((name) => name.startsWith("__reactContainer$"));15    const hostRoot = container[key].stateNode.current;16    setCount(countFibers(hostRoot));17  }18 19  return (20    <section>21      <h2>Your cart</h2>22      <button onClick={countAll}>Count the fibers</button>23      <p>{count === null ? "Not counted yet" : `Fibers: ${count}`}</p>24    </section>25  );26}

1import { useState } from "react";2 3function countFibers(root) {4  let count = 0;5  let fiber = root;6  while (fiber !== null) {7    count += 1;8    if (fiber.child !== null) {9      fiber = fiber.child;10      continue;11    }12    while (fiber !== root && fiber.sibling === null) fiber = fiber.return;13    if (fiber === root) break;14    fiber = fiber.sibling;15  }16  return count;17}18 19export default function App() {20  const [count, setCount] = useState(null);21 22  function countAll() {23    const container = document.getElementById("root");24    const key = Object.keys(container).find((name) => name.startsWith("__reactContainer$"));25    const hostRoot = container[key].stateNode.current;26    setCount(countFibers(hostRoot));27  }28 29  return (30    <section>31      <h2>Your cart</h2>32      <button onClick={countAll}>Count the fibers</button>33      <p>{count === null ? "Not counted yet" : `Fibers: ${count}`}</p>34    </section>35  );36}

1import { useState } from "react";2 3function fiberOf(node) {4  const key = Object.keys(node).find((name) => name.startsWith("__reactFiber$"));5  return node[key];6}7 8function CartItem({ name }) {9  return (10    <li>11      <button>Remove {name}</button>12    </li>13  );14}15 16// TODO: climb from the clicked node to the nearest CartItem fiber, and return its key.17function itemKeyFor(node) {18  return null;19}20 21export default function App() {22  const [key, setKey] = useState(null);23 24  return (25    <>26      <ul onClick={(event) => setKey(itemKeyFor(event.target))}>27        <CartItem key="tea" name="Tea" />28        <CartItem key="cake" name="Cake" />29      </ul>30      <p>You clicked the item with key: {String(key)}</p>31    </>32  );33}

1import { useState } from "react";2 3function fiberOf(node) {4  const key = Object.keys(node).find((name) => name.startsWith("__reactFiber$"));5  return node[key];6}7 8function CartItem({ name }) {9  return (10    <li>11      <button>Remove {name}</button>12    </li>13  );14}15 16function itemKeyFor(node) {17  for (let fiber = fiberOf(node); fiber !== null; fiber = fiber.return) {18    if (fiber.type === CartItem) return fiber.key;19  }20  return null;21}22 23export default function App() {24  const [key, setKey] = useState(null);25 26  return (27    <>28      <ul onClick={(event) => setKey(itemKeyFor(event.target))}>29        <CartItem key="tea" name="Tea" />30        <CartItem key="cake" name="Cake" />31      </ul>32      <p>You clicked the item with key: {String(key)}</p>33    </>34  );35}

Check your understanding

For each question, picture the fiber tree: which fiber, which field, and which of the two copies.

Key takeaways

• React keeps a fiber, a plain object, for every component and element, and reuses it from render to render.
• tag says what kind of fiber it is, type which component or element, and stateNode what it stands for: a DOM node, the FiberRoot, or nothing.
• Fibers form a tree of links: child is the first child, sibling the next one, and return the parent.
• memoizedProps and memoizedState hold what the last render used. A function component's state is its list of hooks.
• Each updated fiber has a twin, its alternate. React renders into the work-in-progress tree, and the commit points the FiberRoot's current at it.
• flags record what the commit must do and lanes what updates are waiting. The subtree and child versions let React skip parts of the tree.

Coming next: The work loop. It reads ReactFiberWorkLoop.js and follows React as it walks this tree one fiber at a time, and stops between fibers to let the browser draw.