Buscando dados na montagem
Busque JSON de uma API dentro de useEffect, armazene a resposta no estado e dispare a busca apenas uma vez com um array de dependências vazio.
Buscando dados na montagem é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 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.
O padrão de busca de dados
O padrão padrão de busca de dados no React: 1) defina o estado de carregamento, erro e dados; 2) faça a busca em useEffect com dependências vazias []; 3) atualize o estado na função de retorno; 4) renderize com base no estado.
Exemplo completo
Um exemplo completo que busca usuários durante a montagem, com tratamento de carregamento e erros.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}Usando async/await em useEffect
A função de retorno de useEffect não pode ser assíncrona diretamente, pois retornaria uma Promise, que o React interpretaria como uma função de limpeza. Em vez disso, defina uma função assíncrona interna e chame-a imediatamente.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Verificando o status da resposta
fetch não lança uma exceção para erros HTTP, como 4xx e 5xx — apenas para falhas de rede. Sempre verifique response.ok e lance manualmente uma exceção para respostas com erro.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Buscando dados quando uma dependência muda
Adicione a dependência, como um ID dos parâmetros da rota ou das propriedades, ao vetor de dependências do efeito. O efeito será executado novamente e buscará dados atualizados sempre que a dependência mudar.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);Solicitações POST em efeitos
Os efeitos também podem enviar solicitações POST/PUT/DELETE, mas elas geralmente são disparadas por eventos, como o envio de um formulário ou um clique em um botão, e não por efeitos de montagem. Mantenha os efeitos para o carregamento de dados e use manipuladores de eventos para alterações.
Gancho useFetch personalizado
Extraia o padrão de busca, carregamento e erro para um gancho personalizado, a fim de reutilizá-lo entre componentes.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Analisando JSON com segurança
Sempre envolva res.json() em try/catch — JSON malformado lança um SyntaxError. O bloco externo de captura tratará isso, mas conhecer a origem ajuda na depuração.
Configuração da URL base da API
Não fixe URLs de API diretamente no código. Use variáveis de ambiente (import.meta.env.VITE_API_URL) para a URL base. Crie um arquivo api.ts centralizado com uma função encapsuladora de busca configurada.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Quando migrar para o React Query
Padrões manuais de busca funcionam em casos simples. Quando você precisar de armazenamento em cache, novas buscas em segundo plano, paginação ou alterações, migre para o React Query (TanStack Query), que trata todos esses padrões de forma confiável.
Mostrando um esqueleto de carregamento
Em vez de um indicador giratório, mostre uma interface de esqueleto que corresponda ao formato do conteúdo carregado. Isso reduz o tempo de carregamento percebido e evita mudanças na disposição da página.
Verificação rápida
Por que não é possível tornar diretamente assíncrona uma função de retorno de useEffect?
Recapitulação: busca de dados em useEffect
Defina o estado de carregamento, erro e dados. Faça a busca em useEffect com dependências vazias []. Defina uma função assíncrona interna — não torne a função de retorno assíncrona. Sempre verifique res.ok. Adicione a URL ou o ID às dependências para buscas dinâmicas. Extraia o padrão para um gancho useFetch personalizado para reutilização. Considere o TanStack Query para buscas de dados em produção.
Perguntas Frequentes
A aula “Buscando dados na montagem” é grátis?
Sim — o texto completo de “Buscando dados na montagem” é 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 “Buscando dados na montagem”?
Busque JSON de uma API dentro de useEffect, armazene a resposta no estado e dispare a busca apenas uma vez com um array de dependências vazio. 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 2 de 4.
Quanto tempo leva a aula “Buscando dados na montagem”?
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