⚛️ Dominando os React Hooks — useEffect
Se o useState controla o estado de uma interface, o useEffect entra em cena quando o componente precisa sincronizar-se com algo externo ao React. Ele é essencial para efeitos como requisições de dados, assinaturas, timers e integrações com APIs do navegador.
🔄 O que é o useEffect?
O useEffect recebe uma função de configuração e, opcionalmente, uma lista de dependências. O React executa essa lógica e pode chamar uma função de limpeza antes de uma nova execução ou quando o componente é removido.
Sua ideia central é sincronizar o componente com um sistema externo, e não substituir lógicas que poderiam ser resolvidas diretamente durante a renderização.
🎯 Como funcionam as dependências?
A lista de dependências determina quando o efeito deve ser executado novamente:
- ✅ Sem dependências: pode ser executado após cada commit.
- ✅ Array vazio []: não é reexecutado por mudanças de props ou estado.
- ✅ Com dependências: executa novamente quando algum valor reativo utilizado pelo efeito muda.
Todas as dependências reativas usadas pelo efeito devem ser declaradas.
🌐 useEffect na prática
Um uso comum é buscar dados de uma API quando determinado estado muda. Ao alterar o tipo de recurso desejado, o useEffect pode detectar essa mudança e iniciar uma nova requisição.
Os dados recebidos podem ser armazenados em estado e depois renderizados na interface.
⏳ E o async/await?
O useEffect não deve ser diretamente uma função assíncrona. Quando async/await é necessário, uma função assíncrona pode ser criada dentro do efeito e executada.
Em requisições, também é importante considerar a limpeza e possíveis condições de corrida. A documentação do React recomenda esse cuidado para evitar que respostas antigas sobrescrevam dados mais recentes.
🧹 Cleanup: tão importante quanto o efeito
O efeito pode retornar uma função de limpeza. Ela serve para desfazer o que foi configurado: remover assinaturas e listeners, interromper timers ou encerrar conexões.
Com Strict Mode, o React pode executar uma sequência extra de configuração e limpeza em desenvolvimento para encontrar problemas.
⚠️ Boas práticas
useEffect não deve ser usado automaticamente sempre que algo muda. A documentação do React destaca que, se não houver necessidade de sincronização com um sistema externo, provavelmente você não precisa de um Effect.
Hooks também não devem ser chamados dentro de condicionais ou loops. O useEffect deve permanecer no nível superior do componente ou de um Hook customizado.
🚀 Conclusão
Dominar o useEffect é entender quando sincronizar, com o que sincronizar e como limpar essa sincronização. Mais do que memorizar sua sintaxe, é preciso compreender seu ciclo de execução e suas dependências.