Optimizing React Performance: Beyond useMemo

The Premature Optimization Trap

We've all been there—wrapping every prop in useMemo and every handler in useCallback hoping it makes the app faster. Spoiler: it usually doesn't. In fact, it often adds overhead.

Profiling First

Before making any changes, you need to know what is slow. React DevTools Profiler is your best friend here.

1. Record a session where you interact with the laggy component.
2. Look for yellow bars in the Flamegraph.
3. Check 'Why did this render?'

Virtualization key for Large Lists

If you're rendering a list of 10,000 items, no amount of memoization will save you. You need windowing.

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

By rendering only what's visible, we reduced the DOM node count from 10,000 to ~20.

When to actually use useMemo

Use it when:

1. You are engaging in expensive calculations (filtering/sorting 1000+ items).
2. You are passing props to a child heavily optimized with React.memo.
3. To prevent useEffect from firing too often if the dependency is an object/array.

Start with clean code, profile, and then optimize.