Lanes: one click, two renders
Both updates come from the same click, but they land in different lanes. React renders and commits the sync lane first (slow is still 0 in that render), then renders the transition lane. The order in your code doesn't matter: priority does.
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
render: urgent = 0 slow = 0
--- click ---
render: urgent = 1 slow = 0
render: urgent = 1 slow = 1