React Performance Optimization: The Basics That Actually Matter

You know that feeling when you optimize something in React and wonder if anyone actually noticed? Yeah, me too.

Most React performance tips float around the internet as cargo cult advice—people repeat them because they sound smart, not because they've measured the impact. So let me cut through the noise and talk about what actually matters.

The Real Problem

React re-renders happen. A lot. And most of them don't cause visual jank. But when they do, it's usually because:

1. You're computing expensive stuff during render — This is the biggie. If your render function is doing heavy math, API calls disguised as derived state, or massive object transformations, you're going to feel it.

2. You're not memoizing the right things — Not useMemo on everything. Just the computations that are actually slow and run on every render.

3. Your dependency arrays are wrong — And you're re-rendering when you shouldn't be.

What To Actually Do

1. Profile First, Optimize Second

Open DevTools → Profiler tab. Record a session. See where time is actually spent. I've spent hours optimizing the wrong function before.

2. Use useMemo for actual calculations

const expensiveValue = useMemo(() => {
  // Do real work here: filtering huge arrays, calculating complex values
  return complexCalculation(data);
}, [data]);

Not for component definitions. Not for objects that don't change. Just actual computations.

3. Keep your deps arrays tight

This is where most bugs live. A dependency changes unexpectedly, and suddenly you're re-rendering every frame.

// Bad: deps include everything
useEffect(() => {
  doSomething();
}, [state, props, user, config, ...]);
 
// Good: only what actually matters
useEffect(() => {
  doSomething();
}, [userId]); // just the ID, not the whole user object

4. Code split. Actually.

If your bundle is 500KB, performance optimization is theater. Split routes, split heavy libraries, use dynamic imports. Your initial load time matters more than micro-optimizations.

The Meta-Insight

The fastest code is code that doesn't run. The second fastest is code that runs once and caches the result. Everything else is details.

So before you reach for React.memo or useCallback, ask: Do I need this to run at all?

Most of the time, the answer will surprise you.

What's your biggest React performance headache? The stuff that keeps you up at night, not the theoretical stuff.