What is useEffect for, and what does the dependency array mean?
Answer out loud or in your head first, then compare.
Answer
useEffect is for synchronising a component with something beyond calculating the view: for example a connection, a timer or a video player library. The dependency array says which values that synchronisation depends on. When they change, React can clean up the previous effect and run it again.
If an effect opens a connection for roomId, changing rooms should close the old connection and open a new one. The returned function is for cleanup. I don't remove dependencies just to make the effect run less often. Data that can simply be calculated from props and state usually doesn't need to go through an effect.
Why it matters: Prepares you for bugs with search, timers and streams.
Possible follow-ups: What is cleanup for? Why can an effect run again in development mode?
How did it go? Be honest — “Not yet” puts the question on your review list.
Related questions
- useEffect — React
Practise in code
- A search that shows a stale result — runs tests in your browser
Further reading
- React: Synchronizing with Effects(opens in a new tab)Docs; accessed 22.10.2026. What Effects are for, cleanup, and protecting against stale results.