React Performance

What you'll learn

• The three things that cause a component to re-render
• How to read a flame graph in the React Profiler
• When React.memo earns its keep, and the cases it doesn't
• How to measure a useMemo before assuming it helps
• What the React Compiler auto-memoizes for you
• When a list outgrows the DOM and needs virtualization
• How React.lazy and Suspense split a bundle along route or component lines
• The four anti-patterns that quietly re-render the world

1. 01
   What causes a re-render

   The three buttons React watches: state, parent render, and context.
   15 min
2. 02
   The Profiler

   Recording flame graphs, reading commit timing, and answering 'why did this render'.
   17 min
3. 03
   React.memo

   Shallow prop equality, where it pays, and the cases where it quietly costs.
   15 min
4. 04
   useMemo and useCallback, measured

   One case where memoization helps and one where it's noise — both with numbers.
   16 min
5. 05
   The React Compiler in one lesson

   What it auto-memoizes, when hand-written hooks become unnecessary, and the opt-in story.
   14 min
6. 06
   Lists and virtualization

   When a list outgrows the DOM, and how react-window swaps rows in and out.
   15 min
7. 07
   Code splitting with React.lazy and Suspense

   Route-level splits, component-level splits, and the budgets that justify each.
   16 min
8. 08
   Common anti-patterns

   Derived state, context that re-renders the world, inline objects, and effect spam.
   17 min