React vDOM reconciliation1 / 6
React vDOM reconciliation: Stack (legacy) vs Fiber (React 16+)
★ ★ ★
Arrow keys or the buttons below move between slides.
word: reconciliation (react) – convert my jsx into UI.
<App> <Header title="Shop" /> <Counter count={3} /> </App>
Shop
Count3
In order for React to convert my jsx → UI, it must walk the entire components tree.
Every little face is a component. React visits each one and asks "did you change?".
How? – 2 ways.
Stack (legacy)
walk the entire tree in one go and block additional re-renders in the meantime
🚧 blocked
👇💤
0countIdle.
Fiber (new, React 16+)
scan a few components, let browser paint, let additional re-renders run, repeat
👇💤
0countIdle.
React checking a component
Browser paints
A re-render request handled
Practical: just use React 16+
16+
15.616.0 ★17 ★18 ★19 ★
Fiber shipped in React 16, so every current version already reconciles this way.
Example: Try to increase the counter while the Stack reconciler is running. U can't. But you can increase the counter with the Fiber reconciler.
Stack (legacy)
walk the entire tree in one go and block additional re-renders in the meantime
🚧 blocked
💤
0countIdle.
Fiber (new, React 16+)
scan a few components, let browser paint, let additional re-renders run, repeat
💤
0countIdle.
React checking a component
Browser paints
A re-render request handled