Command Palette

Search for a command to run...

Hectal
Phase 16Advanced17 of 28 in React

Performance

Why components re-render, how reconciliation works, memo, useMemo, useCallback, the React Compiler, profiling, transitions, code splitting, big lists and Activity.

Most React apps are fast enough without any tuning. When one isn't, the cause is almost always one of a few things: components rendering far more often than needed, an expensive calculation repeated on every render, a huge list put into the DOM, or too much JavaScript downloaded up front. This phase teaches you to see each of these problems, measure it, and fix it with the right tool instead of guessing.

You'll start with the cost model: why a component renders, why rendering is not the same as updating the DOM, and how React's reconciliation compares trees using element types and keys. Then the classic tools: memo, useMemo and useCallback, and the React Compiler, which now adds most of that memoisation for you at build time. You'll measure with the React DevTools Profiler and the <Profiler> component before changing anything.

The last part is about keeping the app responsive while work happens: concurrent rendering with useTransition and useDeferredValue, code splitting with lazy, rendering huge lists with windowing, and the React 19.2 <Activity> component that hides part of the screen without losing its state. Every live example logs what React really does, so you can watch renders happen and disappear.

0/10 · 0%
10 topics ~4 h 30 code blocks & diagrams
Start with the first topic
1
16.1

Why Components Re-render

A component renders again for three reasons only: its own state changed, its parent rendered, or a context it reads changed; rendering means calling your function, which is cheap, and React touches the DOM only where the result is different.

22 min 1 diagram 2 code practice

2
16.2

Reconciliation, Fiber and the Diffing Rules

Reconciliation is how React compares the new element tree with the previous one: elements of the same type in the same position (with the same key) are updated in place and keep their state, anything else is destroyed and rebuilt; Fiber is the internal data structure that lets React do this work in small, interruptible pieces.

25 min 1 diagram 3 code practice

3
16.3

memo: Skipping a Component's Render

memo(Component) makes React skip rendering a component when its parent re-renders with props that are shallowly equal to last time; it breaks when you pass new objects, arrays or functions on every render, and it's worth it only for components that are slow to render or render very often.

20 min 2 code practice

4
16.4

useMemo and useCallback

useMemo(fn, deps) caches the result of a calculation and useCallback(fn, deps) caches a function, both until a dependency changes; they help when a calculation is slow or when a stable reference lets memo or an effect skip work, and they are noise everywhere else.

22 min 3 code practice

5
16.5

The React Compiler

The React Compiler is a build-time Babel plugin that rewrites your components and hooks to cache values, functions and JSX automatically, giving you the benefit of memo, useMemo and useCallback without writing them; it relies on your code following the Rules of React, and you can opt a function out with "use no memo".

26 min 5 code practice

6
16.6

Measuring Performance: Profiler and DevTools

Measure before optimising: the React DevTools Profiler records every commit and shows which components rendered, why, and for how long; the <Profiler> component reports the same data to your code; and the browser's Performance panel shows the whole picture, including layout, paint and long tasks.

21 min 3 code practice

7
16.7

Concurrent Rendering: useTransition and useDeferredValue

Concurrent rendering lets React prepare a slow update in the background and interrupt it for urgent ones; useTransition marks a state update as non-urgent and gives you isPending, and useDeferredValue lets a slow part of the screen lag behind a fast-changing value so typing stays responsive.

22 min 3 code practice

8
16.8

Code Splitting with lazy

Code splitting cuts your JavaScript into smaller files (chunks) that load only when needed: lazy(() => import("./Chart")) makes a component load on first render, <Suspense> shows a fallback meanwhile, and splitting by route plus preloading on hover keeps the first page fast without making later clicks slow.

22 min 2 code practice

9
16.9

Big Lists and Virtualisation: the Performance View

Rendering thousands of rows is slow because every row costs React work and DOM nodes the browser must lay out and paint; windowing (virtualisation) renders only the rows in view plus a few extra, libraries like TanStack Virtual and react-window do it for you, and CSS content-visibility is a lighter alternative for long pages.

23 min 2 code practice

10
16.10

Hiding Without Losing State: Activity

<Activity mode="visible" | "hidden"> hides part of the UI without unmounting it: hidden content keeps its state and DOM (hidden with display: none), its effects are cleaned up while hidden and re-created when shown, and React can pre-render hidden content in the background at low priority.

20 min 1 diagram 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Stop a slow child from re-rendering

App has a counter and renders a slow Chart that logs Chart rendered every time it renders. Clicking Add re-renders Chart for nothing: it doesn't use the count.

Intermediate
2

Make memo work with a stable callback

The list items are wrapped in memo, but each still re-renders when you click #bump (the visit counter), because App passes a new onRemove function on every render. Each item logs Item rendered: <name>.

Intermediate
3

Cache an expensive filter with useMemo

filterProducts logs filtering each time it runs. Right now it runs on every render, including when you click #theme, which has nothing to do with the products.

Intermediate
4

Keep typing fast with useDeferredValue

The search box #q filters a slow list of 300 cities (each SlowCity burns a little time). Typing feels sluggish because every keystroke renders the whole list urgently.

Advanced
5

Tabs that remember with Activity

Build two tabs with buttons #tab-notes and #tab-timer. The Notes tab has an input #notes. The Timer tab's component logs timer started in an effect and timer stopped in its cleanup.

Advanced