Mastering useEffect: Fetch Data, Subscribe, and Clean Up

What useEffect Really Does

useEffect lets you run side effects — data fetching, subscriptions, timers, or DOM mutations — after every render. React guarantees the DOM is updated before running your effect, so it is safe to read or modify it.

The Dependency Array

Passing an empty array [] tells React to run the effect only once after the first render. Passing specific values runs the effect whenever those values change. Omitting the array entirely runs the effect after every render — usually not what you want.

Fetching Data Correctly

Always handle the case where the component unmounts before the fetch completes. Use an AbortController and cancel the request in the cleanup function. This prevents setting state on an unmounted component and avoids memory leaks.

Cleanup Functions

Return a function from useEffect to clean up subscriptions, event listeners, or timers. React calls this cleanup before re-running the effect and again when the component unmounts. Skipping cleanups is one of the top sources of bugs in React apps.