Peek at the fiber tree (React's private fields)
React DOM stores a pointer to the fiber on each DOM node under a key starting with __reactFiber$. Walking return, child and sibling shows the linked tree; the List fiber's memoizedState is its hook list in call order. These are private and change between versions.
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
return chain: ul -> List -> main -> App -> HostRoot
ul.child then .sibling: Item key=a, Item key=b
List hook list: [ 3, { current: 'hello' }, 'Asha' ]
ul fiber's stateNode is the real <ul>: true
List fiber's stateNode: null