useEffect and Dependencies

What this is. An effect synchronizes your component with something outside React: a request, a subscription, a timer, the document title.

It runs after the render is on screen. The array in the second argument decides when it runs again.

Try it

Change [count] to []. The effect now runs once and never again, even though count keeps changing.

loading editor…

loading React…

The effect runs once after the first render, then again after every change to count.

The dependency array is a list of what the effect reads. Leave something out and the effect keeps using the value it captured the first time, quietly, forever.

The linter warning about missing dependencies is almost always describing a real bug. Do not silence it. Fix the effect, or restructure so it does not need that value.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Cleanup, and When Not to Use an Effect →

← Back