What is the useEffect hook, and how do you control when it runs?

Question

Accepted Answer

The useEffect hook lets you perform side effects in function components. Side effects include data fetching, subscriptions, manually changing the DOM, and timers.

useEffect takes two arguments: a function containing the effect, and an optional dependency array.

The dependency array controls when the effect runs. If you pass an empty array, the effect runs only once after the initial render, similar to componentDidMount. If you pass an array with values, the effect runs whenever any of those values change. If you omit the array entirely, the effect runs after every render.

Here is a basic example for fetching data:

useEffect(() => {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => setUser(data));
}, []);

The empty array means this runs once when the component mounts.

For cleanup, return a function from the effect. This runs before the component unmounts and before the effect runs again:

useEffect(() => {
  const subscription = api.subscribe(handleUpdate);
  return () => {
    subscription.unsubscribe();
  };
}, []);

Common patterns include fetching data on mount, setting up event listeners, and syncing with external systems. The dependency array should include all values from the component scope that are used inside the effect.

React's strict mode in development runs effects twice to help detect missing cleanup. This catches bugs where cleanup is forgotten.