Como utilizar o useEffect?

Para utilizar o useEffect, você precisa importá-lo de react e chamá-lo dentro do seu componente. Ele recebe duas funções como parâmetros: uma função que contém o efeito colateral e uma array de dependências. A função de efeito colateral é chamada sempre que o componente é renderizado ou quando alguma das dependências mudam.

import React, { useEffect } from 'react';

function MyComponent(props) {
  const { someValue } = props;

  useEffect(() => {
    // Efeito colateral aqui
  }, [someValue]);

  return <div>My Component</div>;
}

É importante notar que a array de dependências deve conter todas as variáveis que a função de efeito colateral utiliza, caso contrario o efeito colateral será executado sempre que a página for renderizada.

Limpando efeitos colaterais

A função de efeito colateral no useEffect retorna uma função de limpeza. Essa função é chamada imediatamente antes da nova função de efeito colateral ser chamada, ou imediatamente antes do componente ser desmontado. É geralmente usado para limpar qualquer efeito colateral, tais como remover um evento de ouvinte do documento.

useEffect(() => {
  const handleClick = () => {
    console.log('clicked!');
  };
  document.addEventListener('click', handleClick);
  return () => {
    document.removeEventListener('click', handleClick);
  };
}, []);

No exemplo acima, o ouvinte de eventos é adicionado quando o componente é montado e é removido quando o componente é desmontado, evitando vazamentos de memória.

Exemplos de uso

• Utilizando um useEffect para lidar com a logica de carregamento de dados de uma API externa, onde é preciso limpar a chamada quando o componente deixa de ser renderizado.
• Utilizando um useEffect para gerenciar o estado de uma animação com requestAnimationFrame, onde é preciso limpar a animação quando o componente deixa de ser renderizado.
• Utilizando um useEffect para gerenciar a inscrição de um evento de scroll no window e atualizar o estado interno do componente de acordo.

Conclusão

O useEffect é uma ferramenta poderosa para lidar com efeitos colaterais no React.

Ele permite sincronizar o estado interno do seu componente com o sistema externo, e com as boas práticas de limpeza de efeitos colaterais, ele pode evitar vazamentos de memória.

É uma boa prática sempre listar as dependências do useEffect de forma a evitar chamadas desnecessárias.

Com o uso adequado, o useEffect pode ajudar a tornar seus componentes mais fáceis de entender e manter.