React Performance Optimization Techniques

When to Optimise

First rule: measure before optimising. Use the React DevTools Profiler to find slow components. Then apply these proven techniques.

1. React.memo — Skip Unnecessary Re-renders

const Child = React.memo(function Child({ name }) {
  return <div>{name}</div>;
});
// Only re-renders if "name" prop actually changes

2. useMemo — Cache Expensive Calculations

const sorted = useMemo(
  () => bigList.sort(compareFn),
  [bigList]
);

3. useCallback — Stable Function References

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);
// Prevents child re-renders when passed as a prop

4. Code Splitting with lazy()

const Dashboard = React.lazy(() => import("./Dashboard"));

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>

5. Virtualise Long Lists

Rendering 10,000 rows? Use react-window or react-virtuoso to render only the visible ones.

6. Use Stable Keys

// ❌ index keys cause bugs on reorder
items.map((item, i) => <Row key={i} />)
// ✅ stable unique IDs
items.map(item => <Row key={item.id} />)

FAQs

Should I wrap every component in React.memo?

No — the comparison itself has a cost. Only memoise components that re-render often with the same props.

What's the single biggest win?

Usually code-splitting and avoiding huge re-renders from context. Profile first. More in our React section.