useEffect

Learning objectives#

• Explain what an effect is for
• Write correct dependency arrays
• Clean up subscriptions, timers and requests
• Recognise effects you do not need
• Prevent infinite render loops

Explanation#

React runs your component to calculate the UI. Effects run after React has updated the screen, and are meant for side effects that reach outside React.

The dependency array lists every reactive value the effect uses. React re-runs the effect when any of them change. [] means “run after the first render only”. No array means “after every render”.

An effect can return a cleanup function. React calls it before re-running the effect and when the component unmounts — use it to clear timers, unsubscribe or abort requests.

You do not need an effect to compute values from props or state (compute them during render), or to respond to a user event (do it in the event handler).

Infinite loops happen when an effect sets state that is also one of its dependencies, or when a dependency is an object or function recreated on every render.

Visual explanation#

Syntax#

1useEffect(() => {
2  // set up: subscribe, start a timer, fetch…
3  return () => {
4    // clean up
5  };
6}, [dependency1, dependency2]);

Code example: Fetching data with cleanup#

1import { useEffect, useState } from 'react';
2

3export default function UserProfile({ userId }) {
4  const [user, setUser] = useState(null);
5  const [error, setError] = useState(null);
6

7  useEffect(() => {
8    const controller = new AbortController();
9    setUser(null);
10    setError(null);
11

12    fetch(`/api/users/${userId}`, { signal: controller.signal })
13      .then(res => {
14        if (!res.ok) throw new Error(`HTTP ${res.status}`);
15        return res.json();
16      })
17      .then(setUser)
18      .catch(err => {
19        if (err.name !== 'AbortError') setError(err.message);
20      });
21

22    return () => controller.abort(); // cancel if userId changes or we unmount
23  }, [userId]);
24

25  if (error) return <p role="alert">Could not load user: {error}</p>;
26  if (!user) return <p>Loading…</p>;
27  return <h2>{user.name}</h2>;
28}

Shows “Loading…”, then the user’s name. Switching userId quickly cancels the stale request, so an old response can never overwrite a newer one.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. The effect depends on userId, so it runs on mount and whenever userId changes.
2. An AbortController is created for this run of the effect.
3. fetch does not reject on HTTP errors, so res.ok is checked explicitly.
4. The cleanup aborts the request. If userId changes before the response arrives, the old request is cancelled and cannot set stale data.
5. Abort errors are ignored because they are expected during cleanup.

Real-world use case#

Common mistakes#

1// ✗ unnecessary effect
2const [fullName, setFullName] = useState('');
3useEffect(() => setFullName(first + ' ' + last), [first, last]);
4

5// ✓ compute during render
6const fullName = first + ' ' + last;

1// ✗ options is new every render → effect runs forever
2const options = { page };
3useEffect(() => { load(options).then(setData); }, [options]);
4

5// ✓ depend on the primitive value
6useEffect(() => { load({ page }).then(setData); }, [page]);

Best practices#

• Use effects only to synchronise with external systems
• Include every reactive value in the dependency array
• Always clean up subscriptions, timers and in-flight requests
• Prefer a data-fetching library (TanStack Query, React Router loaders) for complex apps
• Expect effects to run twice in development Strict Mode — write cleanup so this is harmless

Remember this#

Practice exercise#

1function WindowWidth() {
2  const [width, setWidth] = useState(window.innerWidth);
3  useEffect(() => {
4    const onResize = () => setWidth(window.innerWidth);
5    window.addEventListener('resize', onResize);
6    return () => window.removeEventListener('resize', onResize);
7  }, []);
8  return <p>Width: {width}px</p>;
9}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.