Ganchos de reação: useEffect

A última vez que escrevi sobre o hook useState, agora vou explicar o que o hook useEffect faz no React. O gancho useEffect foi desenvolvido para resolver alguns dos desafios apresentados pelos métodos de ciclo de vida dos componentes da classe ES6. Se você entender os métodos de ciclo de vida de componentes de classe, este gancho é equivalente aos métodos de ciclo de vida componentDidMount, componentDidUpdate e componentDidUnmount. Usarei um exemplo que mostrará como os ganchos podem substituir esses métodos de ciclo de vida.

Antes de mais nada, vamos dar uma olhada em como é o useEffect. Este gancho é uma função que recebe dois argumentos. O primeiro é um retorno de chamada com a lógica de efeito colateral dentro dele. A segunda é uma matriz opcional de dependências. O gancho useEffect executa o retorno de chamada somente se as dependências mudarem entre as renderizações. Isso permite que você controle quando o efeito colateral é executado. Vejamos como são as dependências e o que elas fazem.

Se você não fornecer uma matriz de dependência, o efeito colateral será executado após cada renderização.

Se você fornecer uma matriz vazia, o efeito colateral será executado somente após a renderização inicial, semelhante a componentDidMount.

Se você fornecer um valor de estado ou prop na matriz, o efeito colateral será executado toda vez que a dependência for alterada, semelhante a componentDidUpdate.

Vamos fazer um exemplo com um programa simples. Meu componente terá um botão que incrementará um contador. Depois que o contador atingir um determinado número, o título do documento será alterado. Primeiro vamos configurar o componente com o mínimo. Ele terá um estado para o contador e uma função de manipulador.

Como você pode ver, eu já tenho uma função useEffect neste componente. Na renderização inicial dos componentes, 'Montado' é registrado no console. Quando o botão é clicado, o número é incrementado em 1. Perfeito agora, digamos que queremos registrar algo no console toda vez que o componente renderizar, mas não na renderização inicial. A melhor coisa sobre hooks é que você pode ter vários no mesmo componente. Terei algumas declarações condicionais para controlar quando o efeito é executado. Isso parecerá assim.

Eu criei uma variável definida como false que impedirá que o efeito seja disparado na primeira renderização. Depois disso, toda vez que o contador for incrementado, você poderá ver que o console imprime corretamente. Isso ocorre porque esse gancho não tinha um argumento de dependência, então ele renderiza toda vez que o estado muda. Agora vamos implementar um filtro que mudará o título do documento depois que um determinado número for atingido no contador. Para isso, terei que usar outro gancho de estado e definir outra instrução condicional.

Agora, quando o contador chega a 11, o título do documento é atualizado. Isso ocorre porque uma vez que a condição é atendida, o valor do estado do filtro é alterado para verdadeiro e o gancho é executado. Há mais uma coisa que podemos fazer com useEffect. Alguns efeitos colaterais precisam de limpeza, como cronômetros de limpeza. Se um retorno de chamada retornar uma função, o gancho considerará isso como uma limpeza de efeito.

Você verá que a limpeza será executada após cada renderização. Isso é semelhante ao que você pode fazer em componentes de classe com componendDidUnmount.

Eu me diverti muito aprendendo esse gancho. Este é um dos ganchos mais importantes e também um dos mais complicados. Depois de alguma prática com isso, porém, faz muito sentido. Bem, isso é tudo para useEffect. Boa codificação!