Dependency array

Learn the useEffect dependency array.

What is the dependency array?

The second argument of useEffect is the dependency array. It decides when the effect re-runs. When you write useEffect(effect, [a, b]), the effect runs only when a or b changes.

There are three cases: with no array it runs on every render; an empty array [] runs only on mount; a value list [a, b] runs when one of those values changes. A wrong dependency array leads to extra runs or to stale-value bugs, so write the array carefully.

Three behaviours

You should know three behaviours of the dependency array. No array runs the effect after every render. An empty array [] runs the effect once, on mount; this is the most common pattern.

A filled array [a, b] runs on mount and when a or b changes. The array takes primitive values (number, string, boolean); objects and arrays get a new reference on every render, so be careful. The exhaustive-deps lint rule helps you write dependencies correctly.

Exercise Mount effect with an empty array

Write a Logger component. Use useEffect to log "Started" with console.log. Leave the dependency array empty ([]) so it runs only on mount. The component returns <Text>Log</Text>.

Show example solution

import { useEffect } from "react";
import { Text } from "react-native";

function Logger() {
  useEffect(() => {
    console.log("Started");
  }, []);
  return <Text>Log</Text>;
}

Test yourself

Complete the empty array

useEffect(() => {
  console.log("Mount");
}, ____);

Show answer

useEffect(() => {
  console.log("Mount");
}, []);

When does this effect run?
```
useEffect(() => {
  saveProfile(profile);
}, [profile]);
```
- Only on mount
- When profile changes
- Never
- Her render'da
Show answer

When profile changes — The filled array re-runs when profile changes.
Match the behaviour to the scenario

No array

Every render
[]

Only on mount
[a, b]

When a or b changes
useEffect

Side effect hook

Next lesson: Cleanup

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies