How do `useEffect` dependencies work, and what belongs inside an effect?

Explain useEffect dependencies and side effects

Explains what useEffect is for, how dependencies work, and how to avoid stale or runaway effects.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

An effect runs after render to synchronize the component with something outside React, such as a subscription, timer, browser API, or network request. The dependency array tells React which values the effect uses from render. When those values change, React reruns the effect. I would include the values used by the effect rather than choosing dependencies to force a desired timing.

Full answer below

Practice focus

Effect purpose, dependency arrays, synchronization, stale closures, render purity, cleanup, and common effect mistakes.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
useEffect is one of the most overused and misunderstood React APIs. Interviewers use it to test render purity, synchronization, and dependency reasoning.
An effect runs after render to synchronize the component with something outside React, such as a subscription, timer, browser API, or network request. The dependency array tells React which values the effect uses from render. When those values change, React reruns the effect. I would include the values used by the effect rather than choosing dependencies to force a desired timing.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would avoid using effects to derive state that can be calculated during render. Effects are for synchronization, not for ordinary data transformation. If an effect depends on a function or object created during render, I would either move that logic inside the effect, memoize intentionally, or simplify the design. Cleanup matters when the effect starts something that can outlive the render, such as subscriptions, timers, or in-flight requests.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Using effects to keep easily derived state in sync.
Removing dependencies to stop an effect from rerunning.
Starting timers or subscriptions without cleanup.
Doing work in effects that belongs in event handlers.

How do `useEffect` dependencies work, and what belongs inside an effect?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

Tech stacks

Skill areas

Was this drill useful?

Found this answer useful?

Human editorial direction

How do `useEffect` dependencies work, and what belongs inside an effect?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

Tech stacks

Skill areas

Start a conversation

Was this drill useful?

Found this answer useful?

Human editorial direction