O uso de 🌟useEffect🌟
Oi pessoal, queria trazer um embate, quando usar useEffect, quais os principais problemas de perfomance ele causa, porque a IA gosta tanto de usar, e qual a melhor alternativa atualmente estão usando
1
3
O pessoal geralmente se confunde com o uso de Hooks e Estados do React, e acabam complicando coisas simples, ou "over-usando" algo sem necessidade.
Na maioria dos seus casos de uso, você vai utilizar o UseEffect para realizar uma ação quando uma dependência mudar seu valor;
O UseEffect é chamado a primeira vez com o valor inicial das dependências e executado novamente quando uma de suas dependências muda.
Os problemas de perfomance não são culpa do UseEffect, e sim, do seu possível mau uso:
Atualizar o valor da própria dependência é a causa de Loops Infinitos;
Manter diversas dependências dentro do mesmo UseEffect vai dificultar a debugação.
Além disso, aqui vão algumas dicas:
Evite usar o UseEffect para atualizar o valor de um estado com base no valor da dependência, experimente o UseMemo.
Simplifique os seus UseEffect, coloque apenas as dependências necessárias e execute somente as operações necessárias, vai melhorar a qualidade do seu código e vai facilitar o debug.
As alternativas ao UseEffect são o UseCallback ("cacheia" funções e só altera ela quando as dependências mudam, e com isso você decide se chama ela ou não (da para usar ela como dependência de um UseEffect e executar a função lá));
Outra alternativa é o UseMemo ("cacheia" valores, e esse valor não muda durante as renderizações do React, apenas quando a dependência muda o valor.)
1
UseEffect é basicamente uma operação asyncrona, não causa problema de performance significativo além de uma nova renderização.
é basicamente "renderize qualquer coisa até esses dados estiverem disponíveis, depois renderize novamente com os dados"
2
useEffect não é assíncrono. Ele roda após o commit do render no DOM, mas no main thread. O que pode ser assíncrono é o código dentro dele, não o hook em si.
E sim concordo que um useEffect isolado não é um gargalo por si só.
O problema de performance surge quando ele é usado como ferramenta padrão de controle de fluxo: data fetching, derivação de estado e orquestração de lógica.
Isso cria renders intermediários, cascata de efeitos e trabalho desnecessário no main thread.
1
useEffect não é assíncrono
é como se fosse, é uma tarefa que é executada depois
1
Você ja leu a documentação do React de cabo a rabo? Eu recomendo!
Serio mesmo, ela explica muito bem sobre o funcionamento, te faz entender o porquê das coisas, ao invés de só fazer.
Mas respondendo sua pergunta, o useEffect não é vilão, na verdade ele é necessário muitas vezes.
1
E concordo também que o useEffect não é vilão, ele é necessário para side effects reais.
O ponto não é demonizar o hook, e sim o uso excessivo e inadequado dele como ferramenta genérica de controle de fluxo.
O que tem acontecido recentemente ( e essa é minha experiência ) é uma enxurrada de código ( principalmente gerado por IA ) que:
usa useEffect para derivar estado
sincronizar props com state
reagir a mudanças que poderiam ser resolvidas no render
Isso gera:
renders intermediários desnecessários
cascata de efeitos
mais complexidade e menos previsibilidade
Ou seja, o problema não é o useEffect em si, mas o default mental model de “quando algo muda, usa um effect”, que vai contra o modelo declarativo do React