The proper use of useEffect

Wed, 21 Oct 2026 16:01:56 +0200

The proper use of useEffect

useEffect is for side effects: stepping outside React to sync a component with an external system (network, timers, subscriptions, browser APIs). The typical case is async work: a promise whose result arrives after the render.

Ref: Synchronizing with Effects

The standard shape

It’s literally the first page of the official useEffect documentation.

useEffect(() => {
 // 1. setup: start the side effect
 const controller = new AbortController();

 fetch(`/api/users/${userId}`, { signal: controller.signal })
 .then((res) => {
 if (!res.ok) throw new Error(`HTTP ${res.status}`);
 return res.json();
 })
 .then(setUser)
 .catch((err) => {
 if (err.name !== 'AbortError') setError(err);
 });

 // 2. cleanup: stop or neutralize it
 return () => controller.abort();
}, [userId]); // 3. dependencies: re-run when they change

fetch rejects only on network errors: an HTTP error (4xx, 5xx) still resolves, so check res.ok and throw. All the examples below do it.

ReactJS on Buro notes

The proper use of useEffect

The proper use of useEffect

The standard shape