No React, um efeito é qualquer coisa que acontece fora do processo de renderização do componente. Ou seja, qualquer coisa que o React não gerencie diretamente como parte da renderização da UI. Exemplos comuns incluem buscar dados, atualizar o título da aba do navegador, ler ou gravar no armazenamento local do navegador, obter a localização do usuário e muito mais. Essas operações interagem com o mundo externo e são conhecidas como efeitos colaterais. React fornece o hook useEffect para permitir que você lide com esses efeitos colaterais. useEffect permite que você execute uma função após o componente renderizar ou atualizar. Vamos ver como o hook useEffect funciona e por que ele é essencial para o desenvolvimento moderno em React. Para usar o hook useEffect, você primeiro precisa importá-lo:

import { useEffect } from "react";

Então você o usa como uma função, assim:

useEffect(() => {
  // Your side effect logic (usually a function) here
}, [dependencies]);

A função de efeito é executada após o componente renderizar, enquanto o argumento opcional dependencies controla quando o efeito é executado. Observe que dependencies pode ser um array de "valores reativos" (state, props, functions, variables e assim por diante), um array vazio ou ser omitido completamente. Aqui está como todas essas opções controlam como useEffect funciona:

• Se dependencies for um array que inclui um ou mais valores reativos, o efeito será executado sempre que eles mudarem.
• Se dependencies for um array vazio, useEffect executa apenas uma vez quando o componente é renderizado pela primeira vez.
• Se você omitir dependencies, o efeito será executado toda vez que o componente renderizar ou atualizar.

Por exemplo, nesta aplicação Counter, não passamos um argumento dependencies, então o efeito é executado quando o componente renderiza e toda vez que ele atualiza:

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Component renders");
  });

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        flexDirection: "column",
      }}
    >
      <h2>{count}</h2>
      <div>
        <button onClick={() => setCount(count + 1)}>Increase</button>
        <button onClick={() => setCount(count - 1)}>Decrease</button>
      </div>
    </div>
  );
};

export default Counter;

Mas se passarmos um array vazio como dependência, o efeito será executado apenas na primeira renderização:

useEffect(() => {
  console.log('Component renders');
}, []);

Se você passar o estado count como uma dependência, o efeito será executado quando o componente for renderizado pela primeira vez e quando count mudar:

useEffect(() => {
  document.title = The current count is ${count};
  console.log('component renders');
}, [count]);

Observe que, se o efeito que você configurou persistir além do ciclo de vida de renderização do componente, pode ser necessário outra função para "limpar" essa função após o componente renderizar ou atualizar. Por exemplo, se sua função de efeito usa setInterval(), configura um listener de evento como window.addEventListener(), ou conecta a um servidor, você precisará de uma função de limpeza para executar clearInterval(), window.removeEventListener() e desconectar do servidor, respectivamente. Aqui está a sintaxe para retornar uma função de limpeza do hook useEffect:

useEffect(() => {
  // Your side effect logic here
  return () => {
    // Cleanup logic here (optional)
  };
}, [dependencies]);

Por exemplo, se você adicionar um listener de evento de scroll, pode limpá-lo removendo-o na sua função de limpeza:

useEffect(() => {
  const handleScroll = () => {
    // Handle scroll logic
  };
  window.addEventListener("scroll", handleScroll);

  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);