The fiber tree
- React course
- Expert
- Lesson 18/32
- 4 min
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.
Practice Write the createFiber function
Write a createFiber function. Take type and props parameters. Return { type, props, child: null, sibling: null, return: null }. Export it.
Starter code
// Write the createFiber function hereSample solution
function createFiber(type, props) {
return {
type,
props,
child: null,
sibling: null,
return: null,
};
}
export default createFiber;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Fill in the blank: create a fiber node
function createFiber(type, props) {
return {
type,
props,
child: null,
sibling: null,
____: null,
};
}function createFiber(type, props) {
return {
type,
props,
child: null,
sibling: null,
return: null,
};
}Explanation: A fiber node carries a return pointer.
2 Which pointers traverse the fiber tree?
- prev and next
- left and right
- child, sibling and return Correct answer
- up and down
Explanation: Fibers are traversed with child, sibling and return.
3 Match fiber concepts
| Term | Meaning |
|---|---|
child |
Child fiber |
sibling |
Sibling fiber |
return |
Parent fiber |
shouldYield |
Pause check |