Concept questionMedium~7 min

Interview question

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.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would treat ignored dependency warnings as design smells, not noise. Some effects need careful guards, but suppressing the lint rule without understanding can create stale data bugs. React development mode may run effects more than once to reveal unsafe behavior, so effects need to be idempotent where possible. I would test mount, update, and unmount paths, especially for components that subscribe, poll, or fetch.

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.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot explain what dependencies represent.
Effects rerun forever or use stale values.
Lint warnings are suppressed without a reason.
Unmounted components still receive updates.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When can an effect be removed entirely?
How would you handle a function dependency?
Why can development mode run effects more than once?

Continue practice

No explicit flow link is set yet, so these are nearby drills from the same path or taxonomy.

Abstraction vs encapsulationConcept question / Easy / ~5 minContinue Accessibility BasicsConcept question / Medium / ~7 minContinue Access modifiersConcept question / Easy / ~5 minContinue

Opening drill

Concept questionMedium~7 min

Interview question

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

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.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would treat ignored dependency warnings as design smells, not noise. Some effects need careful guards, but suppressing the lint rule without understanding can create stale data bugs. React development mode may run effects more than once to reveal unsafe behavior, so effects need to be idempotent where possible. I would test mount, update, and unmount paths, especially for components that subscribe, poll, or fetch.

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.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot explain what dependencies represent.
Effects rerun forever or use stale values.
Lint warnings are suppressed without a reason.
Unmounted components still receive updates.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When can an effect be removed entirely?
How would you handle a function dependency?
Why can development mode run effects more than once?

Continue practice

No explicit flow link is set yet, so these are nearby drills from the same path or taxonomy.

Abstraction vs encapsulationConcept question / Easy / ~5 minContinue Accessibility BasicsConcept question / Medium / ~7 minContinue Access modifiersConcept question / Easy / ~5 minContinue

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 practice

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 practice