What is the useEffect hook in React?

Rendering in React should ideally be a "pure" calculation of what the UI looks like for the current state and props. Side effects — anything that reaches outside that calculation, like an API call or setting up an event listener — belong in useEffect instead.

Basic usage

useEffect(() => {
  document.title = `You clicked {'{'}count{'}'} times`;
}, [count]);

This effect runs after every render where count has changed since the last render. The array at the end (called the dependency array) controls when the effect re-runs.

The dependency array's three modes

• No array: the effect runs after every single render
• Empty array []: the effect runs once, after the first render only
• Array with values [count]: the effect runs after the first render, and again any time a listed value changes

Cleanup

An effect can return a cleanup function, which React runs before the component unmounts or before the effect runs again — commonly used to remove event listeners or cancel subscriptions that the effect set up, preventing memory leaks.