Same type keeps state, a new type rebuilds
Each counter is clicked twice. Flipping A's ternary keeps A's state: it's still a Counter at the same position. Swapping B's wrapper from div to section changes the type one level up, so B unmounts, mounts again and starts from 0.
Reconciliation is how React compares the new element tree with the previous one: elements of the same type in the same position (with the same key) are updated in place and keep their state, anything else is destroyed and rebuilt; Fiber is the internal data structure that lets React do this work in small, interruptible pieces.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
A form shows either a <LoginForm> or a <SignupForm> in the same place. Both render an email <input>. When the user switches, the typed email should be cleared. Should you do anything?
A profile page <Profile userId={id} /> keeps a draft comment in state. When the user navigates to another profile, the draft must reset. Show the simplest fix.
Explain it without notes
What are the two heuristics React's reconciliation relies on, and why are they needed?
Why does a component defined inside another component lose its state on every render?
What goes wrong with index keys when you insert at the top of a list?
What is a fiber, and what did the Fiber architecture make possible?
Preview
Console
Nothing logged yet.Expected console output
A: mounted
B: mounted
A: 2 | B: 2
--- flip A's branch
A: 2 | B: 2
--- swap B's wrapper
B: unmounted
B: mounted
A: 2 | B: 0