The fiber tree

Learn that fiber nodes are the unit of rendering.

The fiber tree

Fiber is the internal data structure of the reconciler in React 16+. Each component becomes a fiber node carrying its type, props, children and siblings.

The fiber tree is a linked-list-like structure: you traverse it with child, sibling and return pointers. This enables interruptible rendering.

React processes a fiber, pauses, and resumes later from where it left off. This is the basis of concurrent rendering.

Processing fibers

React traverses the fiber tree depth-first. It processes a fiber, then moves to the child, then to the sibling. At each step it checks the time; if time is up it pauses.

Pausing lets the browser respond to user interaction. React saves the current fiber and continues in the next frame.

This mechanism is controlled by a shouldYield function.

Exercise Write the createFiber function

Write a createFiber function. Take type and props parameters. Return { type, props, child: null, sibling: null, return: null }. Export it.

Show example solution

function createFiber(type, props) {
  return {
    type,
    props,
    child: null,
    sibling: null,
    return: null,
  };
}
export default createFiber;

Test yourself

Fill in the blank: create a fiber node

function createFiber(type, props) {
  return {
    type,
    props,
    child: null,
    sibling: null,
    ____: null,
  };
}

Show answer

function createFiber(type, props) {
  return {
    type,
    props,
    child: null,
    sibling: null,
    return: null,
  };
}

Which pointers traverse the fiber tree?
- prev and next
- left and right
- child, sibling and return
- up and down
Show answer

child, sibling and return — Fibers are traversed with child, sibling and return.
Match fiber concepts

child

Child fiber
sibling

Sibling fiber
return

Parent fiber
shouldYield

Pause check

Next lesson: Commit and render

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies