Vertex

React Performance Engineering

Measure before you optimise. Profiling, render behaviour, concurrent features, and shipping less JavaScript.

Advanced2h 21m4 modules7.4k students

Start learning

What you’ll learn

  • Measure honestly

    Use the profiler and field metrics to find the real bottleneck instead of the one you assumed.

  • Control re-renders

    Understand why a component re-rendered and fix the cause rather than papering over it with memo.

  • Use concurrent features

    Keep the interface responsive during expensive updates with transitions and deferred values.

  • Ship less JavaScript

    Split, lazy load, and prefetch so the bundle stops being the first thing that hurts.

Tracklist

4 modules · 2h 21m

  1. 1Measuring PerformanceGetting numbers before you change anything: profiling tools, field metrics, and finding wasted work.37m 2s
    1. Lesson 1.1Profiling with React DevToolsFree preview12m 58s
    2. Lesson 1.2Core Web Vitals in a React app14m 46s
    3. Lesson 1.3Finding wasted renders9m 18s
  2. 2Rendering OptimizationThe tools for cutting render work — memoisation and stable identity — and when reaching for them is the wrong move.33m 49s
    1. Lesson 2.1When memo actually helps10m 17s
    2. Lesson 2.2useMemo and useCallback in practice13m 41s
    3. Lesson 2.3Keys and list reconciliation9m 51s
  3. 3Concurrent ReactKeeping the interface responsive while expensive work happens: transitions, deferred values, and Suspense.35m 14s
    1. Lesson 3.1Marking updates with useTransition10m 41s
    2. Lesson 3.2Deferring expensive values7m 52s
    3. Lesson 3.3Suspense for data loading16m 41s
  4. 4Bundle and Load PerformanceThe work that happens before React even runs: splitting code, loading it at the right moment, and handling heavy assets.35m 3s
    1. Lesson 4.1Code splitting that pays off5m 30s
    2. Lesson 4.2Lazy loading and prefetching22m 50s
    3. Lesson 4.3Images and fonts6m 43s