Loading and Error States

Always handle all three states. Never leave your users wondering if something is broken or just slow.

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    <!-- Start loading -->
    setLoading(true);
    setError(null);

    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  <!-- Render based on state -->
  if (loading) {
    return <div className="loader">Loading... Please wait.</div>;
  }

  if (error) {
    return (
      <div className="error">
        <h3>Something went wrong!</h3>
        <p>{error}</p>
      </div>
    );
  }

  <!-- Success state -->
  return (
    <div>
      <h1>Data Loaded Successfully</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}