Hook · Synchronization
useEffect
Synchronize with the outside world
useEffect is not 'code that runs after render'. It's the way to tell React: while this component is on screen, keep something in the external world in sync with its state.
The setup → cleanup loop
Every time the dependencies change, React runs the cleanup of the previous effect and then the setup of the new one. That's why returning a cleanup function matters: it's what cancels stale subscriptions, timers, or requests.
The dependencies
The [] array declares which reactive values the effect uses. Omitting one causes stale closures; adding things you don't use triggers unnecessary re-runs. Treat the linter like a strict but correct partner.
Common pitfalls
- 01Forgetting to return a cleanup function when subscribing to events or intervals causes memory leaks.
- 02Every value used inside the effect that comes from the component should be in the dependency array.
- 03useEffect with [] does not mean 'run once' — it means 'no dependencies'. If the effect depends on something and you omit it, you'll get stale values.
Was this helpful?
Sign in to give feedback