Double buffering: two fiber objects take turns
On the first render there is no alternate. Each update builds the work-in-progress Counter from the spare object, the commit flips root.current, and the two objects swap roles: fiber#1, fiber#2, fiber#1…
Inside React every component instance is a fiber, a plain object linked into a tree; a work loop renders fibers one unit at a time, lanes decide which updates go first, and a finished tree is swapped in during a commit that cannot be interrupted.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a function countFibers(fiber) that walks a fiber subtree using only child, sibling and return (no recursion) and returns how many fibers it has.
Predict the console order for a component A with a useLayoutEffect and a useEffect, rendering a child B with the same two effects, on first mount.
Explain it without notes
What is a fiber and what does it store?
Walk through the render phase and the commit phase. Which one can be interrupted, and why does that matter for your code?
What is double buffering in React?
What are lanes, and how does React decide which update renders first?
How does the scheduler keep the page responsive during a big render?
Preview
Console
Nothing logged yet.Expected console output
first render: current = fiber#1 (count 0), alternate = none
after click 1: current = fiber#2 (count 1), alternate = fiber#1
after click 2: current = fiber#1 (count 2), alternate = fiber#2
after click 3: current = fiber#2 (count 3), alternate = fiber#1