What are reactive values and what to be careful about with dependencies of useEffect?

1
Reactive values include state, props and all variables and functions declared directly inside of your component.
2
If your Effect’s code doesn’t use any reactive values, its dependency list should be empty ([]):
3
If your Effect depends on an object or a function created during rendering, it might run too often.
4
Avoid using an object created during rendering as a dependency. Instead, create the object inside the Effect. By itself, creating a function from scratch on every re-render is not a problem. You don’t need to optimize that. However, if you use it as a dependency of your Effect, it will cause your Effect to re-run after every re-render.
5
If your app uses server rendering (either directly or via a framework), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for hydration to work, your initial render output must be identical on the client and the server.

Difficulty: 5/10

Topics: reactive state, useEffect dependencies, stale closures

0-2 years experience

1
You have a component that fetches data in useEffect with an empty dependency array, but you also need to refetch when a prop userId changes. How would you set up the dependencies?
2
If you store a value in a ref and read it inside useEffect without adding it to the dependency array, what could go wrong?
3
What happens if you put a non‑stable object like {page: 1} directly in the dependency array of useEffect?

2-5 years experience

1
You notice that a useEffect runs infinitely after adding a state variable to its dependency array. Walk me through why that happens and how you'd fix it.
2
A component uses a custom hook that returns a callback created with useCallback, but the callback is omitted from the effect dependencies. The effect sometimes works and sometimes doesn't. Explain the root cause.
3
When you moved a piece of logic from a parent component into a child, the child's useEffect stopped firing as expected. What dependency changes would you check?

5-8 years experience

1
In a large dashboard with dozens of widgets, each widget uses useEffect to subscribe to a WebSocket based on a prop symbol. How would you structure the dependencies to avoid redundant subscriptions and memory leaks?
2
You need to memoize a derived value that depends on several pieces of state and use it inside multiple effects across components. What patterns would you use to keep the dependency arrays stable and prevent unnecessary re‑renders?
3
Explain how you would audit a codebase for stale‑closure bugs in useEffect and propose a systematic refactor.

8+ years experience

1
Your team is migrating a legacy class component that uses componentDidUpdate to many functional components. How would you ensure that the new useEffect dependencies correctly capture all reactive values without introducing subtle bugs, especially across multiple teams?
2
Design a linting or code‑review guideline for handling reactive values and useEffect dependencies in a monorepo with many contributors. What rules would you enforce and why?
3
When building a shared UI library, you want to expose a hook that internally uses useEffect with several dependencies. How do you design its API to keep the dependency management simple for library consumers while avoiding breaking changes?

❓Can you walk me through a concrete example of a stale‑closure bug you’ve seen?
❓How would you test that your effect dependencies are correct?
❓What trade‑offs do you consider when deciding to memoize a value for a dependency array?