How to Handle Loading and Error States When Fetching APIs in React

How to Handle Loading and Error States When Fetching APIs in React

A real app does not just show data. It shows what is happening when data is loading and what went wrong when a request fails. Handling these states is what separates a toy UI from a real one.

The Three States

Every fetch has three possible states: loading, error, and success. Track all three with separate state variables so the UI can respond to each.

Show a Loading State

While waiting for the response, show a spinner, a skeleton, or a placeholder. This tells the user something is happening and prevents a blank screen.

Show an Error State

If the fetch fails, show an error message with a retry option. Never leave the user staring at nothing. A clear error message and a retry button turn a failure into a recoverable experience.

Use a Finally Block

Set loading to false in a finally block so it stops whether the fetch succeeded or failed. Forgetting this leaves the spinner spinning forever after an error.

Handle Empty Data

A successful fetch that returns an empty list is not an error. Show an empty state with a helpful message so the user understands why nothing is shown.

Avoid Race Conditions

If a user triggers multiple fetches, the earlier one might resolve after the later one, overwriting fresh data with stale data. Use cleanup flags or abort signals to ignore outdated responses.

The Takeaway

Real apps handle loading, error, empty, and success states for every fetch. Track all three states, use a finally block, and guard against race conditions. Doing this makes your UI feel professional.