Managing Loading, Error, and Empty States0%

Managing Loading, Error, and Empty States

Beginner12 min read•Updated: Jul 11, 2026

Managing Loading, Error, and Empty States

1. The Anatomy of Real-World Asynchronous UI

In professional software development, user interfaces rarely receive data instantly. When fetching resources across networks, an application exists in one of several predictable lifecycle states:

1
Idle / Initial: Before a request begins.
2
Loading: The request is in-flight across the network.
3
Error: The request failed (HTTP 404, 500, network offline, timeout).
4
Empty (Zero-data): The request succeeded, but the database returned an empty collection ([]).
5
Success: Data is available and ready for presentation.

Handling all of these states gracefully separates amateur applications from bulletproof enterprise software.

Output

                ┌──> [Loading State] ──> (Network in-flight)
                │
3[Initiate Fetch] ─┼──> [Error State]   ──> (HTTP 500 / Network down)
                │
                ├──> [Empty State]   ──> (Succeeded, but [] results)
                │
                └──> [Success State] ──> (Render full data UI)

2. Implementing the State Machine Pattern in React

A robust design pattern is holding status flags or an explicit status enum in useState:

JSX

1import React, { useState, useEffect } from 'react';
2 
3export default function StudentDirectory() {
const [students, setStudents] = useState([]);
const [status, setStatus] = useState('loading'); // 'loading' | 'error' | 'success'
const [errorMessage, setErrorMessage] = useState('');
7 
useEffect(() => {
  // Simulated asynchronous fetch
  const fetchStudents = async () => {
    try {
      setStatus('loading');
      const response = await fetch('/api/students');
      
      if (!response.ok) {
        throw new Error(`Server returned HTTP status ${response.status}`);
      }
18 
      const data = await response.json();
      setStudents(data);
      setStatus('success');
    } catch (err) {
      setErrorMessage(err.message || 'Failed to load students');
      setStatus('error');
    }
  };
27 
  fetchStudents();
}, []);
30 
// 1. Loading State
if (status === 'loading') {
  return (
    <div className="state-card loading-state">
      <div className="spinner" />
      <p>Loading student records...</p>
    </div>
  );
}
40 
// 2. Error State
if (status === 'error') {
  return (
    <div className="state-card error-state">
      <h3>Unable to Load Data</h3>
      <p className="text-danger">{errorMessage}</p>
      <button onClick={() => window.location.reload()}>Retry</button>
    </div>
  );
}
51 
// 3. Empty State (Zero results)
if (students.length === 0) {
  return (
    <div className="state-card empty-state">
      <img src="/assets/empty-box.svg" alt="No data" width={80} />
      <h3>No Students Registered Yet</h3>
      <p>Get started by adding your first batch of students.</p>
      <button className="btn-primary">Add Student</button>
    </div>
  );
}
63 
// 4. Success State
return (
  <div className="directory-content">
    <h2>Registered Students ({students.length})</h2>
    <ul className="student-list">
      {students.map((s) => (
        <li key={s.id}>{s.name} — {s.course}</li>
      ))}
    </ul>
  </div>
);
75}

3. Designing High-Quality Empty States

An empty state should never be a blank white screen. High-converting user interfaces treat empty states as opportunities:

Illustrative Visual: Provide an icon or illustration indicating emptiness.
Clear Explanation: Explain why there is no data ("No courses match your filter").
Call-to-Action (CTA): Give the user a clear next step (e.g. "Clear Filters", "Add New Course", "Explore Catalog").

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Why is an explicit status state (e.g. 'loading' | 'error' | 'success') often superior to multiple booleans (isLoading, isError, isSuccess)?

Question 2

What is the defining characteristic of an "Empty State" in an asynchronous UI?

Question 3

What should a well-designed Empty State provide to the user?

Question 4

In an asynchronous component, what should be displayed if status === 'error'?

Question 5

How do early returns simplify managing loading and error states?

Next Lesson

Rules of React Hooks

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Preventing Component Rendering with Null	Rules of React Hooks

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext