Dependency array

Learn that the dependency array controls when the effect runs.

Dependency array

The second argument to useEffect is a dependency array: useEffect(fn, [count]). The effect runs only when the values in this array change.

An empty array [] runs the effect only on the first render. No array runs it on every render. This control prevents needless runs.

You must list every outside value the effect uses as a dependency; otherwise it goes stale.

Three run modes

useEffect has three modes: no array (every render), empty array (first render), filled array (on change). Which one you pick depends on the effect's purpose.

Forgetting dependencies is a common bug; outside values must always be listed. The eslint-plugin-react-hooks warns about missing dependencies.

The right dependency array makes the effect run at the right time.

Exercise Effect with dependencies

Complete the skeleton. Write a Counter component; import useState and useEffect. Define const [count, setCount] = useState(0);. Call useEffect(() => { document.title = String(count); }, [count]);. Return <button onClick={() => setCount(count + 1)}>{count}</button>. Export it.

Show example solution

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => { document.title = String(count); }, [count]);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

export default Counter;

Test yourself

When does useEffect(fn, []) run?
```
An empty array means "no dependencies".
```
- Every render
- Only on unmount
- Never
- Only on the first render
Show answer

Only on the first render — An empty array runs the effect once on the first render.

Dependency array: fill in the missing part

useEffect(() => { fetch(url); }, [____])

Show answer

useEffect(() => { fetch(url); }, [url])

Dependency array: match the terms

[]

First render
[count]

On count change
no array

Every render
[url, page]

Multiple deps

Next lesson: Cleanup function

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies