DEV Community

loading...

Como funciona o segundo argumento do useEffect

ino_gu profile image Gustavo Inocencio ・1 min read

Normalmente desenvolvedores que estão começando a trabalhar com o React Hooks esbarram na compreensão do useEffect. Primeiramente, uma introdução ao useEffect:
No React baseado em classes nós temos alguns métodos para "controlar o tempo" na aplicação, tais como componentdidmount, componentdidupdate, métodos disparados na renderização inicial da aplicação e na re-renderização, respectivamente.
No React Hooks, esse controle do tempo é realizado pelo useEffect. E podem ser utilizados diversos useEffect. Inclusive, é uma boa prática utilizar um para cada objetivo.
E ai que entra o problema. Cada useEffect será disparado a cada re-renderização, porém, muitas vezes nem sempre é necessário esse disparo. E muitas vezes é até custoso para a performance disparar todos os useEffect.
Para isso utilizamos o segundo argumento. Veja o exemplo:

  useEffect(() => {
    filtraOperacoes();
  }, [entrada, saida, operacoes]);
Enter fullscreen mode Exit fullscreen mode

Nesse caso, o método de filtro de operações só precisa ser chamado se uma das três variáveis muda seu estado. Para casos diferentes desse, o método é irrelevante. Por isso, se eu preciso que sempre que uma dessas três variáveis mudem de estado seja disparado o método filtraOperacoes eu utilizo esse recurso.

Discussion (0)

pic
Editor guide