How to Fetch Data With useEffect in React the Right Way

How to Fetch Data With useEffect in React the Right Way

Fetching data with useEffect is one of the first things you learn, and one of the easiest to get wrong. Here is the correct pattern.

The Basic Pattern

Declare state for data, loading, and error. Inside useEffect with an empty dependency array, call the API, store the result, and handle errors.

Use a Cleanup Flag

Declare a flag that tracks whether the component is still mounted. In the cleanup function, set it to false. Only update state if the flag is still true, so you avoid updating state after unmount.

Or Use an Abort Signal

For fetch, use an AbortController. Pass its signal to the fetch call, and abort it in the cleanup. This actually cancels the network request, which is cleaner than a flag.

Handle the Response Shape

Read the actual response. The data is often nested inside an object, so extract the array you need before mapping over it.

Handle All Three States

Show a spinner while loading, an error with a retry on failure, and the data on success. Never leave the user with a blank screen.

Avoid Infinite Loops

If you set state inside the effect and include that state in the dependency array, you create an infinite loop. Use an empty array for one-time fetches, or include only the values the fetch depends on, like an id.

The Takeaway

Fetch in useEffect with the right dependency array, handle loading and error, guard against unmount with a cleanup flag or abort signal, and read the response shape correctly. That is the right way.