Lidando com estados de carregamento e erro
Adicione variáveis de estado de carregamento e erro ao componente, mostre um indicador enquanto busca dados e exiba uma mensagem de erro amigável em caso de falha.
Lidando com estados de carregamento e erro é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Os três estados dos dados assíncronos
Qualquer operação assíncrona com dados tem três estados: carregando, quando a solicitação está em andamento; sucesso, quando os dados foram recebidos; e erro, quando a solicitação falhou. Sua interface deve tratar os três explicitamente.
Interface de carregamento
Durante o carregamento, mostre um indicador giratório, um esqueleto ou um espaço reservado. Evite o reenvio do formulário desativando os botões durante o carregamento. O usuário deve sempre saber que o aplicativo está funcionando.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Interface de erro
Mostre uma mensagem de erro amigável quando uma solicitação falhar. Inclua uma ação de nova tentativa para que os usuários não fiquem bloqueados. Registre o erro completo para os desenvolvedores.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Mecanismo de nova tentativa
Incremente um contador de novas tentativas no estado e adicione-o ao vetor de dependências do efeito. Quando o usuário clicar em Tentar novamente, o contador mudará, disparando o efeito novamente.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Práticas recomendadas para o estado de carregamento
1) Mostre o estado de carregamento imediatamente ao iniciar a solicitação. 2) Mantenha o estado de carregamento mínimo — não o redefina se houver dados armazenados em cache. 3) Na paginação, diferencie o carregamento inicial do carregamento de mais dados. 4) Nunca mostre brevemente um indicador giratório por menos de 100 ms — adicione um atraso ou mantenha os dados anteriores visíveis.
Atualizações otimistas
Atualizações otimistas: atualize a interface imediatamente, antes da confirmação do servidor, e reverta a alteração se a solicitação falhar. Isso cria a impressão de resposta instantânea.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}Limites de erro para erros de renderização
Use limites de erro, componentes baseados em classes com componentDidCatch, para capturar erros lançados durante a renderização. Eles mostram uma interface alternativa em vez de fazer todo o aplicativo falhar.
Mapeamento de erros HTTP
Mapeie os códigos de status HTTP para mensagens amigáveis. 401 → redirecione para o login. 403 → mostre "Acesso negado". 404 → "Não encontrado". 429 → "Muitas solicitações — aguarde". 500+ → "Erro do servidor — tente novamente".
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}useReducer para estados complexos de busca
Quando o carregamento, o erro e os dados interagem, por exemplo, ao limpar o erro durante um novo carregamento, um redutor é mais claro do que várias chamadas de useState.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense — o futuro
O React Suspense com estruturas de busca de dados, como React Query, Relay e Next.js, permite que os componentes sejam "suspensos" enquanto aguardam dados. Um limite Suspense pai mostra automaticamente uma interface alternativa. Esse é o caminho que o React está seguindo.
Erro de rede versus erro do servidor
Erros de rede, como ausência de conexão ou CORS, são lançados no bloco de captura. Erros do servidor, como 4xx e 5xx, são resolvidos normalmente — é necessário verificar res.ok para detectá-los. O tratamento de erros deve abordar as duas categorias.
Verificação rápida
O que é uma "atualização otimista"?
Recapitulação: estados de carregamento e erro
Sempre trate os estados de carregamento, sucesso e erro. Mostre uma interface de carregamento significativa. Mapeie os erros HTTP para mensagens amigáveis. Implemente mecanismos de nova tentativa. Use atualizações otimistas para fornecer uma resposta percebida como instantânea. Use useReducer para coordenar o estado da busca. O Suspense simplificará ainda mais esse padrão no futuro.
Perguntas Frequentes
A aula “Lidando com estados de carregamento e erro” é grátis?
Sim — o texto completo de “Lidando com estados de carregamento e erro” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Lidando com estados de carregamento e erro”?
Adicione variáveis de estado de carregamento e erro ao componente, mostre um indicador enquanto busca dados e exiba uma mensagem de erro amigável em caso de falha. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Lidando com estados de carregamento e erro”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos de useEffect: dependências e limpeza
- Buscando dados na montagem
- Lidando com estados de carregamento e erro
- AbortController para limpeza