April 2, 20261 min read
The real cost of a re-render
reactperformance
"This component re-renders too much" is one of the most common — and most misleading — things you will hear in a React performance review.
Renders are not free, but most are cheap
A render is just a function call producing elements. The cost is in what that render touches: a big subtree, an expensive computation, or a layout-thrashing effect downstream.
Measure before you memo
Reaching for memo and useCallback everywhere adds its own overhead and hides the real issue. Profile first; let the flamegraph tell you which renders are actually long.
// only worth memoizing when the subtree is genuinely expensive
const Chart = React.memo(function Chart({ points }) {
return <Canvas points={points} />;
});
Optimise the render that takes 40ms, not the one that fires often but finishes in a fraction of a millisecond.