Ciclo de vida de um componente React com o Effect Hook

Conhecendo o que � o ciclo de vida de um componente

Descrevendo um componente da forma mais b�sica poss�vel, podemos dizer que � um pedaço de c�digo que � renderizado para o usu�rio, que pode ser atualizado caso haja alguma interaç�o, e que pode deixar de ser renderizado.

Por essa raz�o, cada componente possui um ciclo de vida, que vai da fase de montagem at� a fase de desmontagem (destruiç�o). Vejamos na Figura 1 quais s�o essas fases do ciclo de vida de um componente.

Figura 1. Ciclo de vida de um componente

Primeiramente o componente � configurado, o que chamamos de INICIALIZAÇ�O.
Depois acontece a MONTAGEM, que � quando o componente � renderizado pela primeira vez.
Em seguida, caso necess�rio, esse componente pode ser atualizado (ATUALIZAÇ�O).
E, por fim, quando por algum motivo ele precisar "sumir", acontece a DESMONTAGEM.

Antigamente, o ciclo de vida era feito exclusivamente atrav�s da sintaxe de classe, por�m com a chegada dos Hooks no React a partir da vers�o 16.8, agora conseguimos utilizar o hook useEffect para fazer o processo de controle do ciclo de vida de um componente. Vejamos mais sobre o useEffect no t�pico seguinte.

useEffect

O useEffect � um Hook que permite executar efeitos colaterais em seus componentes.

Alguns desses efeitos colaterais podem ser: busca de dados em uma API, atualizar diretamente o VirtualDOM e controlar temporizadores (setTimeout e setInterval).

O useEffect � utilizado para fazer o ciclo de vida de um componente em substituiç�o �s funç�es componentWillMount, componentDidMount, componentDidUpdate e componentWillUnmount.

As funç�es de ciclo de vida (componentWillMount, componentDidMount, componentDidUpdate e componentWillUnmount) n�o s�o mais utilizadas desde a atualizaç�o do React para a vers�o 16.8.

Sintaxe

Veja no C�digo 1 a sintaxe do hook useEffect.


  useEffect(<funç�o>, <array de depend�ncia>)

C�digo 1. Sintaxe do useEffect

Note que o useEffect recebe como primeiro par�metro uma funç�o que ser� executada assim que o componente for renderizado.

O segundo par�metro recebido pelo useEffect ser� um array de depend�ncia, podendo ser utilizado de forma opcional.

Com o array de depend�ncia podemos controlar quando o useEffect executar� a funç�o recebida como par�metro. Ou seja, caso o array seja alterado de alguma forma, o useEffect executar� a funç�o.

Agora entenda melhor como funcionam as fases do ciclo de vida de um componente. Para isso utilizaremos o useEffect no c�digo de exemplo.

Inicializaç�o

Esta � a primeira fase de um componente quando uma p�gina � acessada, em que a aplicaç�o insere seu State. Esse dado j� fica acess�vel durante a renderizaç�o da p�gina, como vemos no C�digo 2 e Figura 2.


  import { useState } from "react";
   
  export default function App() {
    const [contador, setContador] = useState(0);
   
    return (
      <div className="App">
        <h1>Contador: </h1>
        <button onClick={() => setContador(contador + 1)}>+</button>
      </div>
    );
  }

C�digo 2. Inicializaç�o do ciclo de vida de um componente

Figura 2. Inicializaç�o

Perceba que j� temos o valor do state contador instanciado e vis�vel em tela.

Montagem

Esta � a primeira fase do ciclo de vida de um componente. Aqui veremos que o useEffect � executado uma �nica vez quando o componente � montado, ap�s a primeira renderizaç�o.

Esse recurso � normalmente utilizado para fazer requisiç�es na API quando a p�gina � rec�m carregada, como mostra o C�digo 3 e Figura 3.


  import { useState, useEffect } from "react";
   
  export default function App() {
    const [contador, setContador] = useState(0);
   
    useEffect(() => {
      console.log("executa o useEffect ao renderizar o componente");
    }, []);
   
    return (
      <div className="App">
        <h1>Contador: </h1>
        <button onClick={() => setContador(contador + 1)}>+</button>
      </div>
    );
  }

C�digo 3. Montagem do ciclo de vida de um componente

Figura 3. Montagem

Perceba que aqui o useEffect ser� executado ap�s a primeira renderizaç�o do componente.

Atualizaç�o

Esta � a terceira fase pela qual passa nosso componente. Ap�s a fase de montagem onde o componente foi criado, a fase de atualizaç�o entra em cena. � aqui que quando o estado do componente muda ocorre a re-renderizaç�o, como vemos no C�digo 4 e Figuras 4 e 5.


  import { useState, useEffect } from "react";
   
  export default function App() {
    const [contador, setContador] = useState(0);
   
    useEffect(() => {
      console.log("executar� o useEffect toda a vez que o [contador] mudar");
    }, [contador]);
   
    return (
      <div className="App">
        <h1>Contador: </h1>
        <button onClick={() => setContador(contador + 1)}>+</button>
      </div>
    );
  }

C�digo 4. Atualizaç�o do ciclo de vida de um componente

Figura 4. Atualizaç�o

Figura 5. Atualizaç�o

Perceba que a sintaxe aqui � similar da montagem, por�m agora ao inv�s de um array vazio, colocaremos um array de depend�ncia (contador) para que al�m da montagem do componente, a cada atualizaç�o do valor da depend�ncia o useEffect chamar� a funç�o novamente e re-renderiz�-las.

Desmontagem

Esta � a �ltima fase do ciclo de vida de um componente e � respons�vel por fazer a limpeza do Virtual DOM. Quando precisamos desmontar um componente � ela que utilizaremos, como vemos no C�digo 5 e Figura 6.


  import { useState, useEffect } from "react";
   
  export default function App() {
    const [contador, setContador] = useState(0);
   
    useEffect(() => {
      return () => console.log("Aqui � quando o componente ser� desmontado!");
    }, []);
   
    return (
      <div className="App">
        <h1>Contador: </h1>
        <button onClick={() => setContador(contador + 1)}>+</button>
      </div>
    );
  }

C�digo 5. Desmontagem

Figura 6. Desmontagem

Perceba na Figura 6 que quando passamos uma funç�o para o return do useEffect, ele executa a funç�o quando desmontar o componente.