Fetch: loading, erro e sucesso

import { useEffect, useState } from 'react';

export default function Users() {
  const [users, setUsers] = useState([]);
  const [status, setStatus] = useState('loading');
  const [error, setError] = useState('');

  useEffect(() => {
    const controller = new AbortController();

    async function loadUsers() {
      try {
        setStatus('loading');
        setError('');

        const response = await fetch(
          'https://jsonplaceholder.typicode.com/users',
          { signal: controller.signal },
        );

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        setUsers(data);
        setStatus('success');
      } catch (err) {
        if (err.name === 'AbortError') return;
        setError('Não foi possível carregar os usuários.');
        setStatus('error');
      }
    }

    loadUsers();
    return () => controller.abort();
  }, []);

  if (status === 'loading') return <p>Carregando...</p>;
  if (status === 'error') return <p role="alert">{error}</p>;

  return (
    <ul>
      {users.map((user) => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}