React useEffect Dependencies
Why must you list dependencies in useEffect, and what bugs appear if you omit them or over-include unstable objects?
Answers use simple, clear English.
Quick interview answer
Dependencies tell React when to re-run the effect after render. Omitting values causes stale closures. Including new object/array/function identities every render causes infinite loops or excess churn — stabilize with useMemo/useCallback or move constants outside.
Detailed answer
Dependencies tell React when to re-run the effect after render. Omitting values causes stale closures. Including new object/array/function identities every render causes infinite loops or excess churn — stabilize with useMemo/useCallback or move constants outside. Cleanup should unsubscribe.
Real example & use case
Subscribing to a WebSocket for userId — effect depends on [userId] and closes the socket on cleanup/change.
Pros & cons
Pros: explicit synchronization. Cons: eslint exhaustive-deps friction; misuse of empty [] hides bugs.
Code example
useEffect(() => {
const ws = new WebSocket(`/ws/${userId}`);
return () => ws.close();
}, [userId]);Practice code · javascript (view only · no execution)
useEffect(() => {
const ws = new WebSocket(`/ws/${userId}`);
return () => ws.close();
}, [userId]);