Lesson 3: useEffect Deep Dive: Side Effects in React

useEffect synchronizes a component with an external system — data fetching, subscriptions, or manual DOM updates. The dependency array is the key to mastering it.

The dependency array

useEffect(() => {
  // runs after every render
});

useEffect(() => {
  // runs once, on mount
}, []);

useEffect(() => {
  // runs when `count` changes
}, [count]);

React compares each dependency with Object.is() between renders. If any value changed, the effect re-runs.

Cleanup functions

Return a function to clean up subscriptions or timers:

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);   // cleanup
}, []);

Quick check: What happens if you omit the dependency array entirely? The effect runs after every render — which can cause infinite loops if the effect also updates state.