O hook useEffect permite sincronizar o componente com fatores ou 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 alguma 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 as dependencies devem ser um array, temos o seguinte registro do hook useEffect.

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

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
  );
};

Neste componente, utilizamos o hook useEffect para garantir que o estado articles seja preenchido com dados. Como mencionado anteriormente, a função useEffect é executada após cada renderização, garantindo que os dados sejam exibidos ao usuário quando obtidos. Isso assegura uma experiência de usuário contínua com conteúdo 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: chamada da função fetchData. 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 do setArticles;
  • Linhas 12-14: Se ocorrer um erro durante a requisição à API (no bloco catch), ele é registrado no console utilizando console.error.
• Linhas 17-19: Renderização do markup do componente.

Código completo do aplicativo:

Exemplo 2:

Criação do componente Counter para monitorar o valor de counter. O objetivo é registrar o valor da variável counter sempre que ela for alterada. Para isso, será utilizado 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: Importação dos hooks useEffect e useState da biblioteca React para utilizar suas funcionalidades;
• Linha 3: Sintaxe convencional de função define o componente "Counter";
• Linha 4: Inicialização do estado utilizando o hook useState, representando o valor inicial da variável count. Neste exemplo, é 0;
• Linhas 6-8: Uso prático 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, o código dentro da função do hook useEffect deve ser executado.
• Linhas 14-19: Renderização da marcação do componente.

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 inicialmente na renderização e, em seguida, chamada novamente sempre que o valor da variável counter for alterado. É possível verificar esse comportamento observando os logs correspondentes no console.