Estados de Carregamento e de Erro

O EventList acima tem dois problemas. Se o backend estiver fora do ar, a página fica em branco — sem mensagem, sem indicação de falha. E mesmo quando o backend responde, existe um instante entre a montagem do componente e a chegada dos dados em que a lista está vazia e nada aparece na tela.

Vamos adicionar dois estados para cobrir esses cenários:

Arquivo: web/src/EventList.tsx

import { useState, useEffect } from "react";
import { Event } from "./types";

function EventList() {
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch("/api/events")
      .then((res) => {
        if (!res.ok) throw new Error(`Erro ${res.status}`);
        return res.json();
      })
      .then((data) => setEvents(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Carregando eventos...</p>;
  if (error) return <p>Falha ao carregar eventos: {error}</p>;

  return (
    <div>
      <h1>TamoJunto — Eventos</h1>
      {events.map((ev) => (
        <article key={ev.id}>
          <h2>{ev.title}</h2>
          <time dateTime={ev.date}>
            {new Date(ev.date).toLocaleString("pt-BR", {
              dateStyle: "short",
              timeStyle: "short",
            })}
          </time>
          <p>{ev.description}</p>
          <p>📍 {ev.location}</p>
          <p>
            Vagas: {ev.capacity} · Organizado por {ev.organizer_name}
          </p>
        </article>
      ))}
    </div>
  );
}

export default EventList;

Código 7-5: Lista de eventos com estados de carregamento e erro.

Três variáveis de estado controlam o que aparece na tela:

loading começa como true. Enquanto for true, o componente renderiza “Carregando eventos…”.
error começa como null. Se o fetch falhar — rede fora do ar, backend retornando 500 — o catch salva a mensagem de erro, e o componente renderiza a mensagem de falha.
events recebe os dados quando o fetch funciona.

O .finally(() => setLoading(false)) garante que o indicador de carregamento desaparece tanto no sucesso quanto na falha.

Para testar o estado de erro, pare o backend e recarregue a página:

Falha ao carregar eventos: Failed to fetch

Para testar o estado de carregamento, abra o DevTools, vá na aba Network e ative “Slow 3G”. Recarregue — “Carregando eventos…” aparece por alguns segundos antes dos dados.

Keyboard shortcuts

Programação B

Estados de Carregamento e de Erro