Dependency array usage in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the dependency array in React's useEffect hook?

The dependency array tells React when to run the effect. React runs the effect only if one of the dependencies has changed since the last render.

beginner

What happens if you pass an empty dependency array ([]) to useEffect?

The effect runs only once after the first render, similar to componentDidMount in class components.

beginner

What is the effect of omitting the dependency array in useEffect?

The effect runs after every render, which can cause performance issues or unwanted repeated actions.

intermediate

Why should you include all variables used inside useEffect in its dependency array?

Including all variables ensures the effect updates correctly when those variables change, preventing bugs and stale data.

intermediate

What can happen if you incorrectly specify dependencies in the dependency array?

The effect might not run when it should, or it might run too often, causing bugs or performance problems.

What does an empty dependency array in useEffect mean?

A Run effect after every render

B Run effect only once after first render

C Run effect only when dependencies change

D Never run the effect

An empty array means the effect runs once after the component mounts.

If you omit the dependency array in useEffect, when does the effect run?

A After every render

B Only when dependencies change

C Only once after first render

D Never

Without the array, useEffect runs after every render.

Which of these should be included in the dependency array?

A Only state variables

B Only props

C All variables used inside the effect

D No variables

All variables used inside the effect should be dependencies to keep the effect updated.

What problem can occur if dependencies are missing in the array?

A No problem

B Effect never runs

C Effect runs too often

D Effect uses stale data

Missing dependencies can cause the effect to use outdated values.

How can you avoid infinite loops with useEffect?

A Include all dependencies correctly

B Never use useEffect

C Use empty dependency array always

D Call setState inside useEffect without dependencies

Correct dependencies prevent infinite loops caused by repeated effect runs.

Explain how the dependency array controls when useEffect runs in React.

Think about when React decides to run your effect based on the array.

Describe common mistakes with dependency arrays and how to avoid them.

Consider what happens if you forget to list variables or list wrong ones.