Explain all dependency array scenarios in the useEffect hook

The useEffect hook in React can be used to replicate the functionality of component lifecycle methods found in class-based components. By using different configurations of the useEffect hook, you can achieve the same effects as componentDidMount, componentDidUpdate, and componentWillUnmount. Here's how you can use useEffect to replicate the behaviour of these lifecycle methods:

1
No dependency array
2
Empty dependency array
3
Dependency array with values

No Dependency Array: When you don’t provide a dependency array, the useEffect hook will run after every render.

Empty Dependency Array: When you provide an empty dependency array, the useEffect hook will run once after the initial render, similar to componentDidMount in class components.

Dependency Array with Values: When you provide one or more values in the dependency array, the useEffect hook will run after the initial render and also every time any of those values change.

Difficulty: 6/10

Topics: dependency array, stale closures, effect cleanup

Scenario Questions

0-2 years experience

1
You need to fetch user data when a component mounts. How would you set up useEffect and what should you put in the dependency array?
2
If you add a state variable to the dependency array of a useEffect that updates that same state, what happens and why?
3
What happens if you omit the dependency array entirely in a useEffect?

2-5 years experience

1
A component receives a prop 'filter' and runs an expensive calculation inside useEffect, but it’s currently running on every render. How would you adjust the dependency array to fix it, and what trade‑offs should you consider?
2
During a code review you see a useEffect that depends on a function defined inside the component. The linter warns about missing dependencies. How would you resolve this without causing unnecessary re‑renders?
3
A teammate reports that a useEffect setting up a WebSocket connection is reconnecting repeatedly. What could be wrong with the dependency array and how would you fix it?

5-8 years experience

1
You are refactoring a large dashboard with many useEffect hooks—some have empty arrays, some list dependencies, and some have none. How would you audit and standardize dependency usage to avoid bugs and performance issues?
2
Describe how you would design a custom hook for data fetching that uses useEffect, ensuring consumers don’t have to worry about stale closures or missing dependencies.
3
In a high‑traffic app you notice memory leaks because effects aren’t cleaning up correctly when dependencies change. How would you structure the dependency array and cleanup to guarantee proper resource release?

8+ years experience

1
Your organization is migrating a legacy codebase from class components to functional components with useEffect. What strategy would you adopt for handling dependency arrays across many modules to maintain consistency and prevent regressions?
2
How would you set up linting, code‑review guidelines, and automated tests to enforce correct dependency array usage in a multi‑team React project?
3
When designing a shared UI library, you need to expose components that accept callbacks and internal state. How do you decide which values belong in the useEffect dependency array to balance flexibility and performance for downstream consumers?

Follow-up Questions

❓What problems can arise if you include a non‑stable function in the dependency array?
❓How does React’s lint rule help with dependency arrays, and when might you need to override it?
❓Can you give an example where an empty dependency array would be incorrect?