Guia do useEffect

README.md

useEffect

O que é o hook useEffect?

O useEffect é um hook no React que permite realizar "efeitos colaterais" em componentes funcionais. Em outras palavras, é uma forma de executar algumas ações depois que o componente foi renderizado, atualizado ou antes de ser desmontado.

Os efeitos colaterais podem ser qualquer coisa que interage com o mundo fora do componente React, como:

• Fazer uma solicitação para buscar dados de uma API
• Inscrever-se (ou desinscrever-se) em eventos do DOM, como mostrado abaixo
• Usar métodos de localStorage
• Iniciar (ou parar) timers, como setTimeout ou setInterval

Situações comuns para uso

• Fazer uma requisição a uma API quando o componente montar

  useEffect(() => {
    const getData = async () => {
      const response = await fetch('https://example.com/data');
      setData(response);
    };
  
    getData();
    // Requisição é feita sempre que o componente é montado
  }, []);

• Fazer uma requisição a API quando um valor mudar

  useEffect(() => {
    const getData = async () => {
      const response = await fetch(`https://example.com/data/${url}`);
      setData(response);
    };
  
    getData();
    // Requisição é feita sempre que url muda
  }, [url]);

• Se inscrever a um evento que não é possível se inscrever utilizando propriedades de componentes
  • Como por exemplo o evento de rolagem da tela

    useEffect(() => {
      const handleScroll = () => { /* faça alguma coisa quando rolar a tela */ }
      window.addEventListener('scroll', handleScroll);
      return () => window.removeEventListener('scroll', handleScroll);
    }, []);

  • Eventos de mudança de tamanho de tela

    useEffect(() => {
      const handleResize = () => { /* faça alguma coisa quando a tela mudar de tamanho */ }
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, []);

• Iniciar ou parar timers (setTimeout e setInterval)

  useEffect(() => {
     const timer = setTimeout(() => {
         console.log('Hello, world!');
     }, 1000);
  
     return () => {
         clearTimeout(timer);
     };
   }, []);

Quando NÃO usar useEffect

Se você precisa reagir as mudanças em um valor de um estado ou propriedade e a operação que deseja fazer é apenas modificar (setar) o valor de um outro estado, então você não precisa de um useEffect.

• Exemplo:

  function Form() {
     const [primeiroNome, setPrimeiroNome] = useState('Arthur');
     const [sobrenome, setSobrenome] = useState('Procópio');
  
     // 🔴 Evite: efeitos redundantes e desnecessários
     const [nomeCompleto, setNomeCompleto] = useState('');
     useEffect(() => {
       setNomeCompleto(primeiroNome + ' ' + sobrenome);
     }, [primeiroNome, sobrenome]);
     // ...
   }

  • nomeCompleto é um estado derivado e pode ser criado diretamente no código do componente sem a necessidade de criar um novo estado para ele

    function Form() {
       const [primeiroNome, setPrimeiroNome] = useState('Arthur');
       const [sobrenome, setSobrenome] = useState('Procópio');
    
       const nomeCompleto = primeiroNome + ' ' + sobrenome;
     }

Obs: Os exemplos aqui foram tirados detes artigo, vale a pena a leitura. 😉

Sobre estados derivados

São qualquer tipo de estado em nossa aplicação que o seu valor é definido unica e exclusivamente como um resultado de alguma operação com outros estados ou propriedades. No exemplo acima, nomeCompleto é simplesmente a concatenação de primeiroNome e sobrenome o que faz dele um estado derivado e por este motivo pode ser declarado no corpo do componente normalmente.