Como evitar erros de undefined ao filtrar dados assíncronos em React
Seu app React pode travar ao filtrar dados que ainda não chegaram. Descubra a solução definitiva para nunca mais ver 'cannot read property filter of undefined'.
Por que isso é importante
Um pequeno descuido pode travar toda sua aplicação: ao filtrar dados vindos de uma API, é comum ler propriedades de algo indefinido e derrubar seu app React. Entender por que isso acontece e saber como se proteger desse erro garante desempenho, experiência do usuário e menos dor de cabeça para você e sua equipe.
O erro que paralisa: 'Cannot read properties of undefined'
Imagine tentar filtrar uma lista assim que a função de busca é chamada em React. O dado ainda não chegou, mas seu código já tenta acessar o array. Resultado: você vê o temido erro "cannot read properties of undefined (reading 'filter')", e sua aplicação trava.
⚠️Atenção
Sempre que manipular dados que vêm de APIs, assíncronos, há o risco de o valor ser undefined temporariamente.
Por que o data começa como undefined?
Ao iniciar a chamada assíncrona para buscar seus dados, o React precisa esperar a resposta. Nesse intervalo, o valor para seu data (ou tasks) ainda não existe: está undefined. Qualquer operação sobre esse valor nesse momento causa erro.
ℹ️Dica rápida
Teste usando console.log(data) logo após sua chamada: verá que ele é undefined antes dos dados chegarem.
O perigo de agir cedo demais no React
Chamar métodos como filter antes do dado realmente chegar é um convite para erros. O JavaScript não vai te proteger nem avisar — ele apenas vai travar o app inesperadamente.
ℹ️Aprenda sem sofrer
Sempre trate a possibilidade de undefined ao lidar com dados assincronos em componentes React.
O escudo: Optional Chaining
A solução está em adicionar o optional chaining (?.) antes da chamada ao filter. Ao fazer isso, você instrui o JavaScript: "Só execute filter se tasks existir. Se estiver undefined, ignore e siga." Sua aplicação não trava e aguarda os dados chegarem.
⚠️Atenção
Esqueceu o optional chaining? Prepare-se para receber o erro de novo. Esse detalhe não pode ser deixado de lado!
Como funciona o código na prática
Antes: tasks.filter(...). Se tasks é undefined, erro instantâneo. Depois: tasks?.filter(...). Se undefined, simplesmente não executa, mantendo sua tela intacta.
✅Exemplo de código
const resultado = tasks?.filter(task => task.done);
Assim, resultado será undefined até a resposta chegar, sem travar nada.
Padrão seguro: sempre encadeie verificaçōes
Essa prática é válida para qualquer método de array: map, reduce, find, e especialmente em renderizações condicionais de listas.
⚠️Atenção
Optional chaining só impede o erro — se você precisa mostrar um array vazio quando ainda não há dados, use tasks?.filter(...) || [].
Não confie na inteligência do JavaScript
O JavaScript tenta executar o que você manda, mesmo que seja impossível filtrar undefined. Deixe a tecnologia à prova de erros adicionando essa etapa extra de segurança.
ℹ️Dica Dev Doido
A galera do canal sempre esquece desse detalhe e acaba travando a aplicação! Fique esperto e aplique a proteção.
Como explicar aos colegas esse crash?
Mostre o fluxo completo: (1) a função que busca os dados dispara, (2) durante o tempo de espera tasks/data ainda vale undefined, (3) qualquer método de array chamado antes disso vai travar a aplicação.
Diagnóstico rápido: como detectar causa do erro
Basta procurar trechos onde props.data ou variáveis de API aparecem em métodos de array sem ?. — elas são potenciais bombas.
❌Erros típicos
data.map(...), data.filter(...), data.find(...) sem optional chaining são pontos clássicos de crash.
Como o erro se manifesta no navegador
Ao tentar acessar a página, tudo some e só aparece um erro feio no console, geralmente com referência direta à linha do filter. Usuários leigos não saberão o que houve!
O que fazer imediatamente ao ver esse erro
Pare, revise todos os locais onde há métodos de array aplicados em possíveis valores undefined, e proteja com optional chaining. Salve, e sua aplicação volta à vida na hora.
Validação extra: type checking ajuda, mas não elimina riscos
Ferramentas como TypeScript ajudam a alertar sobre tipos, mas mesmo assim, durante o tempo de espera por dados, o valor pode ser undefined. A proteção no código é fundamental.
ℹ️Info
Types protegem na build, mas optional chaining protege no runtime do usuário final.
Resumo rápido: nunca mais deixe seu filter travar seu app
Quando lidar com dados assíncronos em React, sempre trate o valor como potencialmente undefined. Use optional chaining em todos os métodos de array para garantir sua aplicação rodando suave, do início ao fim.
Quer dominar React e nunca mais esquecer desses detalhes?
Se curte aprender dicas práticas, segue o canal Dev Doido no Youtube e mergulhe em aulas que mostram esses problemas na vida real!
✅Acesse agora
Assista em: https://www.youtube.com/@DevDoido