Performance

Stop unnecessary re-renders. Learn React.memo, useMemo, useCallback, and how to read the React Profiler — but only optimize when you have actually measured a problem.

performancememouseMemouseCallbackProfiler

Duration

⏱ About 2 hours

Level

📊 Intermediate+

Prerequisite

🎯 react-05

OUTCOME

Find and fix slow renders with the Profiler

What you'll learn

1Recognize when React.memo helps
2Use useMemo for expensive computations
3Use useCallback for stable function references
4Read the React Profiler flame chart

1. The Default Render Cost is Cheap

⚠️

Premature optimization is the root of all evil. Render performance issues are rare; measure first.

2. React.memo

tsx

const Heavy = React.memo(function Heavy({ value }: { value: number }) {
  // expensive render
  return <div>{value}</div>;
});
// Only re-renders when value (a primitive) changes.

3. useMemo & useCallback

tsx

// Cache an expensive value
const sorted = useMemo(() => items.slice().sort(compare), [items]);

// Cache a function so child memo doesn't re-render
const handleClick = useCallback(() => doThing(id), [id]);

If your child is wrapped in React.memo and receives functions/objects as props, useCallback/useMemo keep those references stable.

4. React Profiler

DevTools → Profiler tab → record an interaction
Look at the flame chart for components rendering longer than ~16ms
Inspect why a component rendered (Why did this render? section)

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗