February 10, 2025 · 1 min read
React Performance Optimization in Production
Practical techniques for keeping a production React app fast: measuring first, then fixing the right things.
Performance work fails when it starts with guesses. The reliable loop is: measure, find the dominant cost, fix it, measure again. Everything below assumes you have a profiler open.
Measure first
Lighthouse and the React Profiler answer different questions. Lighthouse tells you what the user feels (LCP, CLS, INP); the Profiler tells you which components cost render time. Start with the former, then drill into the latter.
Cut unnecessary re-renders
Most wasted render time comes from components re-rendering when their inputs haven't meaningfully changed. The usual culprits are new object and function references created on every parent render, and state lifted higher than it needs to be. Keep state local to where it's used, memoize expensive derived values with useMemo, and stabilize callbacks passed to memoized children with useCallback — but only after the Profiler shows the re-render actually costs something.
Ship less JavaScript
The fastest code is the code you don't ship. Server Components, route-level code splitting, and dynamic imports for heavy client widgets are the highest-leverage moves in a Next.js app.