Render, then the commit sub-phases, in order
Render goes parent → child. The commit then runs effects child → parent (children complete first). On the update, the inline ref callback is a new function, so React detaches the old one with null and attaches the new one. Layout cleanups run in the mutation step; passive cleanups run just before the new passive effects.
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 Parent 0
render Child 0
insertion effect Child
ref attached
layout effect Child
layout effect Parent
passive effect Child
passive effect Parent
--- click ---
render Parent 1
render Child 1
ref detached (null)
insertion effect Child
layout cleanup Child
ref attached
layout effect Child
layout effect Parent
passive cleanup Child
passive effect Child
passive effect Parent