Loading and Error Handling in React

When working with asynchronous operations like API requests in React, it's essential to inform users about what's happening — whether data is still loading, or if something went wrong. Let’s learn how to handle these states gracefully.

Step-by-Step: Add Loading and Error States

Let’s use the useState and useEffect hooks to manage three states:

• Loading: true while data is being fetched.
• Error: stores any error message if something fails.
• Data: stores the actual response if fetch is successful.

import React, { useState, useEffect } from 'react';

function JokeFetcher() {
  const [joke, setJoke] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://official-joke-api.appspot.com/jokes/random')
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch a joke');
        return res.json();
      })
      .then(data => {
        setJoke(data.setup + ' - ' + data.punchline);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p style={{color:'#e67e22'}}>Loading joke...</p>;
  if (error) return <p style={{color:'red'}}>Error: {error}</p>;

  return <p style={{fontSize:'18px', fontWeight:'600'}}>{joke}</p>;
}

💡 Output Based on State

• While fetching: Shows “Loading joke...”
• If error: Displays red error message
• If successful: Displays the joke

Styling Tip 🎨

Use distinct colors and font styles for each state. For example:

• Orange for loading
• Red for errors
• Green or black for successful data

Advanced Tip 🚀

If you're dealing with multiple requests or want better caching, you can use libraries like:

• React Query (TanStack Query)
• SWR (by Vercel)