Loading and Error States in React: Best Practices for API Calls

Loading and Error States in React: Best Practices for API Calls

Loading and error states are what make a React app feel real instead of a demo. Here are the best practices for every API call.

Track Three States

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

Show a Meaningful Loading State

A spinner, a skeleton that matches the final layout, or a placeholder. The user should know something is happening, not stare at a blank screen.

Show a Meaningful Error State

A clear error message with a retry option. Never leave the user staring at nothing after a failure. Tell them what went wrong and how to recover.

Use a Finally Block

Set loading to false in a finally block, so it stops whether the fetch succeeded or failed. Forgetting this is a common bug that leaves a spinner forever.

Handle Empty Results

A successful fetch with no items is not an error. Show an empty state with a helpful message, so the user understands why nothing is shown.

Centralize Error Handling

For apps with many calls, use an axios interceptor to catch errors globally, show a toast, and return a normalized error shape. Components then handle one consistent error shape.

Test All Three States

When you test a fetch, test loading, error, and success. Mock a rejected promise to test error handling, so you confirm it works before users hit it.

The Takeaway

Track loading, error, and success states for every API call. Show meaningful loading and error states, use a finally block, handle empty results, centralize error handling for many calls, and test all three states.