React Performance Optimization: It's Not About the Bundle
For years, I obsessed over bundle size. Smaller bundle = faster app, right? Then I spent a week debugging a "slow" React app with a tiny bundle and realized my whole mental model was backwards.
The Aha Moment
We shipped a major feature with aggressive code-splitting and tree-shaking. Bundle size was down 30%. The app felt slower.
Turns out, we'd optimized for download time but murdered our runtime performance. We were re-rendering entire sections unnecessarily, creating new objects on every render, and the browser was working harder than before.
That's when it clicked: performance is a pyramid, and bundle size is just the base.
The Real Performance Pyramid (from bottom up)
- Runtime Performance — How fast does your app run after download?
- Render Efficiency — How smart is React about what to re-render?
- Data Fetching — How much data are you actually asking the network for?
- Bundle Size — How much code is the user downloading?
Most of us start at the top and wonder why we're not getting wins.
What Actually Changed For Us
- Memoization (the right way): Instead of wrapping everything in
memo(), we identified which components were expensive and why. Turns out, we had 3 culprits. Three. - Derived state → computed values: We stopped storing derived data in state and started computing it when needed. Counter-intuitive, but it eliminated a whole class of sync bugs and stale closures.
- Query co-location: Instead of fetching data at the top level, we moved queries closer to where they're actually used. Smaller payloads, faster perceived performance.
The Mindset Shift
Stop thinking "How do I make this smaller?" and start thinking "Why is this slow?"
Profile first. Measure second. Optimize third. The tools are free:
- React DevTools Profiler (literally in your browser)
- Chrome DevTools Performance tab (underrated)
console.time()(criminally simple, criminally effective)
One More Thing
The best performance optimization I've made isn't in code. It's scheduling renders to happen when the user isn't expecting them (background tasks, idle callbacks, requestIdleCallback). The user doesn't care if your render takes 50ms if it happens while they're not looking.
Modern React with Concurrent Features gets this. Use it.
What performance rabbit hole have you gone down? What assumptions did you have to unlearn?