O hook useEffect permite sincronizar o componente com fatores/serviços externos, incluindo busca de dados, assinaturas, alterações manuais, entre outros.

Sintaxe:

O primeiro argumento (setup) é uma função arrow que será executada após cada renderização. O segundo argumento (dependencies) é um array opcional de dependências. Se as dependencies forem fornecidas, o efeito será reexecutado apenas se uma das dependências tiver sido alterada desde a última renderização. Se o array de dependências for omitido, o efeito será executado após cada renderização.

useEffect(setup, dependencies)

Como sabemos que o setup deve ser uma função arrow e que dependencies deve ser um array, obtemos o seguinte registro do hook useEffect.

useEffect(() => {
  // Something that we need to do
  // after the component is rendered or updated
}, [<optional_dependencies>])

Nota

Componentes React frequentemente dependem da combinação dos hooks useEffect e useState. Esses hooks trabalham em conjunto para gerenciar estado e efeitos colaterais dentro dos componentes.

Exemplo 1:

Vamos criar o componente Articles, que utilizará o hook useEffect para atribuir dados ao estado articles. Esta é uma excelente oportunidade para explorar a poderosa combinação dos hooks do React.

import { useEffect, useState } from "react";
import fetchData from "../service/api";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetchData()
      .then((resp) => {
        setArticles(resp.jokes);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

  return (
    // Render some markup based on the articles data
  );
};

Dentro deste componente, utilizamos o hook useEffect para garantir que o estado articles seja preenchido com dados. Conforme mencionado anteriormente, a função useEffect é executada após cada renderização, assegurando que os dados sejam exibidos ao usuário caso sejam obtidos. Isso proporciona uma experiência de usuário contínua com conteúdo sempre atualizado.

Explicação linha por linha:

• Linha 1: Importação dos hooks useEffect e useState da biblioteca React para utilizar suas funcionalidades;
• Linha 2: Importação da função fetchData de "../service/api". Esta função é responsável por realizar uma requisição à API e buscar dados;
• Linha 4: O componente Articles é definido utilizando a sintaxe convencional de função;
• Linha 5: Inicialização do estado utilizando o hook useState, representando o valor inicial da variável articles. Neste exemplo, é um array vazio;
• Linhas 7-15: Caso real de uso do hook useEffect;
  • Linha 7 e linha 15: sintaxe de uso. É assim que será utilizado;
  • Linha 8: a função fetchData é chamada. Espera-se que esta função faça uma requisição à API e retorne uma promise;
  • Linhas 9-11: Quando a promise é resolvida (bloco then), recebe um objeto resp. Os dados são extraídos de resp usando resp.jokes, que é definido no estado articles através de setArticles;
  • Linhas 12-14: Caso ocorra um erro durante a requisição à API (no bloco catch), ele é registrado no console utilizando console.error.
• Linhas 17-19: Renderização da marcação do componente.

Código completo do aplicativo:

Exemplo 2:

Vamos criar o componente Counter para acompanhar o valor de counter. O objetivo é registrar o valor da variável counter toda vez que ela for alterada. Para isso, utilizaremos o hook useEffect com um array de dependências contendo a variável counter.

import React, { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Count has changed:", count);
  }, [count]);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

Explicação linha por linha:

• Linha 1: Importamos os hooks useEffect e useState da biblioteca React para utilizar suas funcionalidades;
• Linha 3: A sintaxe convencional de função define o componente "Counter";
• Linha 4: Inicializamos o estado usando o hook useState, representando o valor inicial da variável count. Neste exemplo, é 0;
• Linhas 6-8: O uso real do hook useEffect;
  • Linha 7: esta lógica será executada sempre que o valor no array de dependências mudar. Neste caso, é a variável count;
  • Linha 8: array de dependências. Informamos ao React que, quando o valor da variável count for alterado, execute o código dentro da função do hook useEffect.
• Linhas 14-19: O markup do componente é renderizado.

Código completo do aplicativo:

Reserve um momento para inspecionar o console e observar a lógica de execução da função arrow dentro do hook useEffect. A função arrow é executada primeiro na renderização inicial e, em seguida, chamada novamente sempre que o valor da variável counter muda. Você pode verificar esse comportamento observando os logs correspondentes no console.