0Pricing
Frontend Academy · Lesson

Handling Loading and Error States

Add loading and error state variables to your component, show a spinner while fetching, and display a friendly error message on failure.

The Three States of Async Data

Any async data operation has three states: loading (request in flight), success (data received), error (request failed). Your UI should handle all three explicitly.

Loading UI

While loading, show a spinner, skeleton, or placeholder. Prevent form resubmission by disabling buttons during loading. The user should always know the app is working.

if (loading) {
  return (
    <div className="loading-state">
      <Spinner size="lg" />
      <p>Loading users...</p>
    </div>
  );
}

All lessons in this course

  1. useEffect Basics: Dependencies and Cleanup
  2. Fetching Data on Mount
  3. Handling Loading and Error States
  4. AbortController for Cleanup
← Back to Frontend Academy