React Reconciliation
Wild wild west
Fiber
Emils Plavenieks
@empdotlv
@emplv.dev
@emplv
www.emp.lv
by Emils Plavenieks
The real cost of
React re-renders
in 2025
@empdotlv
@emplv.dev
@emplv
www.emp.lv
Misuse of memoization
Dependencies always changing
Premature optimization can backfire
Hydration mismatches and impure components
Performance Illusions
and bottlenecks
Render vs Commit
Render phase
Commit phase
Recursive process: if the updated component returns some other component, React will render that component next, and if that component also returns something, it will render that component next, and so on.
The process will continue until there are no more nested components and React knows exactly what should be displayed on screen.
Initial render, React will create the virtual DOM nodes.
Re-render, React will calculate which of their properties, if any, have changed since the previous render. It won’t do anything with that information until the next step, the commit phase.
React will modify the DOM.
Layout thrashing.
React only changes the DOM nodes if there’s a difference between renders.
Initial render, React will use the appendChild() DOM API to put all the DOM nodes it has created on screen.
Re-renders, React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.
Most don't - they are cheap
Expensive if heavy computation or very frequent
Focus on real bottleneck
Fix your render, before re-render
When re-renders hurt
Chrome DevTools: Performance tab
React DevTools: Profiler & flamegraphs
—>
Profiling React app
Forget about memoization
Smarter diffing and auto memoization
Simple examples - memos, children
Real world applications - complex components
Forget Remember Rules of React
React Compiler - React Forget
Bundled in v19
Can install for v17 and v18
How to and tooling
—>
React Compiler today
One week ago
Activity
useEffectEvent
Performance tracks in Chrome DevTools
React v19.2
Is not measured in single abstract metric - it is measured in UX
Core Web Vitals - INP, TBT
Commit phase - DOM actions and layout thrashing
Side effects
Hydration mismatches and impure components
Fix your render, before re-render
The real cost of React re-renders in 2025
Thanks for your attention
@empdotlv
@emplv.dev
@emplv
www.emp.lv