Effects synchronize with external systems using reactive values read by their setup. Dependencies describe that synchronization rather than a chosen execution schedule.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: A subscription using roomId must resubscribe when roomId changes. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify external synchronization
A room subscription connects the component to an external service. Its setup reads the chosen room ID.
Step 2: Declare actual reactive inputs
Include roomId in dependencies. Removing it leaves the connection pointed at an obsolete room when props change.
Step 3: Pair setup with cleanup
Release the connection made by that specific setup before replacing it. Create setup-only option objects inside the Effect.
Worked scenario
A subscription using roomId must resubscribe when roomId changes.
useEffect(() => {
const connection = connectToRoom(roomId); // application adapter
connection.connect();
return () => connection.disconnect();
}, [roomId]);Changing roomId releases the old connection and creates the new one. The dependency describes which external relationship must be synchronized; it is not simply a preference about how often code executes.
Common mistake
Removing a dependency can preserve a stale closure instead of fixing excessive work.
Verify the behavior
Change rooms rapidly and unmount. Confirm only the active room sends updates, with one cleanup for every completed setup.
Interview exercise
Why does an object dependency retrigger?
Answer and reasoning
A newly created object has a new identity. Move construction inside the Effect or stabilize the true input where appropriate.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.