Command Palette

Search for a command to run...

Hectal
Phase 7Intermediate8 of 28 in React

Effects

Sync components with the world outside React: when effects run, dependencies, cleanup, StrictMode, fetching without races, layout effects and useEffectEvent.

So far every component has been a pure function: data in, UI out, plus event handlers that run when the user does something. Some code fits neither place. A chat room must connect while it is on screen and disconnect when it leaves. A page title must follow the unread count. A timer must tick. This phase teaches effects: code that keeps a component in step with something outside React.

Effects are the most misunderstood part of React, so we go slowly and precisely: exactly when an effect runs (after the commit, usually after the browser paints), what the dependency array really compares, when cleanup runs, and why StrictMode runs your effects twice in development. You'll learn to think in synchronising instead of "on mount" and "on unmount", and you'll see a real race condition in data fetching and two ways to fix it.

Just as important, you'll learn when not to write an effect: most effects in real codebases are unnecessary and cause extra renders and bugs. The phase ends with useLayoutEffect for measuring before paint, useInsertionEffect for CSS-in-JS libraries, and React 19.2's useEffectEvent for reading the latest values without re-running an effect.

0/9 · 0%
9 topics ~3 h 29 code blocks & diagrams
Start with the first topic
1
7.1

Effects: Syncing with the Outside World

An effect is code that keeps a component in sync with something outside React (a timer, a connection, the page title, a browser API); you write it with useEffect, and React runs it after the component's changes are committed to the screen.

23 min 1 diagram 3 code practice

2
7.2

Effect Dependencies

The dependency array tells React which values an effect reads, so it can skip re-running the effect when none of them changed; React compares each one with Object.is, which is why new objects and functions made during render re-run the effect every time.

23 min 3 code practice

3
7.3

Cleaning Up Effects

The function an effect returns is its cleanup: it stops what the effect started (timers, subscriptions, event listeners, connections, requests), and React runs it before the effect runs again and when the component is removed.

22 min 3 code practice

4
7.4

Why StrictMode Runs Effects Twice

In development only, <StrictMode> renders every component twice and runs every effect setup → cleanup → setup when it first mounts, so missing cleanups and impure renders show up immediately; the fix is always to make the effect symmetric, never to stop it running twice.

21 min 4 code practice

5
7.5

The Lifecycle of an Effect

A component mounts, updates and unmounts, but an effect only does two things: start syncing and stop syncing; think of each effect on its own, list the reactive values it reads, and React re-syncs it whenever one of them changes.

21 min 2 code practice

6
7.6

You Might Not Need an Effect

If no outside system is involved, you usually don't need an effect: calculate derived data during render (with useMemo if it's slow), reset state with a key, put user-caused logic in event handlers, and run app-wide setup once at module level.

24 min 3 code practice

7
7.7

Fetching Data in an Effect

You can load data in an effect by tracking loading, error and success states, but you must stop old responses from overwriting new ones (a race condition) with an ignore flag or an AbortController; in real apps a framework or a data library usually does this better.

27 min 4 code practice

8
7.8

useLayoutEffect and useInsertionEffect

useLayoutEffect runs after React updates the DOM but before the browser paints, so you can measure elements and fix the layout without a visible flicker, at the cost of blocking the paint; useInsertionEffect runs even earlier and exists for CSS-in-JS libraries to insert styles.

21 min 3 code practice

9
7.9

Separating Events from Effects: useEffectEvent

Some logic inside an effect should see the latest props and state without making the effect re-run when they change; useEffectEvent (React 19.2) wraps that logic in an Effect Event, a non-reactive function you call only from inside effects.

24 min 3 code practice

Practise this phase

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

1

Sync the tab title

The counter works on the page, but the browser tab's title never changes. Add an effect so that document.title is always Clicks: N, where N is the current count.

Beginner
2

A stopwatch that really stops

Build a stopwatch. #time shows the elapsed seconds with one decimal (0.0, 0.1, …). The button #toggle says Start when stopped and Stop while running.

Intermediate
3

A keyboard listener without leaks

KeyCounter counts how many times the k key is pressed anywhere on the page, shown in #count. Its listener logs k pressed each time it handles a k.

Intermediate
4

Remove the unnecessary effect

This fruit filter works, but it stores the filtered list in state and keeps it in sync with an effect. That costs an extra render on every keystroke and, for one frame, shows the old list.

Intermediate
5

Mini build: a user loader without races

Build a profile viewer with a <select id="user"> for users 1, 2 and 3, using the provided fetchUser(id) fake API (don't change it). User 1 is slow (800 ms), user 2 is fast (150 ms), and user 3 fails after 300 ms.

Advanced