React Hook - useEffect §

---

O React Hook useEffect() é uma ferramenta poderosa para lidar com efeitos colaterais em componentes React funcionais. Ele permite que os desenvolvedores gerenciem operações assíncronas, efeitos colaterais de montagem/desmontagem de componentes e atualizações baseadas em mudanças de estado ou propriedades.

O useEffect() é usado para executar código adicional em componentes funcionais, além da renderização padrão. Ele é semelhante a métodos de ciclo de vida em componentes de classe, mas oferece uma abordagem mais declarativa.

import React, { useState, useEffect } from 'react';
 
const ExampleComponent = () => {
  const [data, setData] = useState([]);
 
  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('https://api.example.com/data');
      const jsonData = await result.json();
      setData(jsonData);
    };
 
    fetchData();
  }, []); // Dependência vazia significa que o efeito ocorre apenas uma vez na montagem
 
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

Sintaxe §

O useEffect() é uma função que aceita duas funções como argumentos: a primeira contém o código a ser executado e a segunda é uma lista de dependências que indica quando o efeito deve ser reexecutado.

useEffect(() => {
  // Código a ser executado
}, [dependencia1, dependencia2]);

• Se a lista de dependências estiver vazia ([]), o efeito é executado apenas uma vez após a montagem inicial do componente (simula o componentDidMount).
• Se não houver lista de dependências, o efeito será executado após cada renderização (simula o componentDidUpdate).
• Se houver dependências especificadas, o efeito só será reexecutado se uma das dependências mudar entre renderizações.

Efeitos colaterais Comuns §

1. Processos assíncronos: Buscar dados de APIs ou realizar operações assíncronas.
2. Gerenciamento de eventos: Configurar e remover event listeners.
3. Manipulação de DOM: Pode ser usado para interagir com o DOM, como atualizar títulos da página, manipular classes ou executar outras operações de DOM.

Cleanup de Efeito §

Se um efeito realizar operações que precisam ser limpas (como remoção de event listeners), a função de cleanup pode ser retornada.

useEffect(() => {
  const handleClick = () => {
    console.log('Clicou!');
  };
 
  window.addEventListener('click', handleClick);
 
  // Cleanup: Remove o event listener ao desmontar o componente
  return () => {
    window.removeEventListener('click', handleClick);
  };
}, []);

Nota

Esse efeito simula o componentWillUnmount.

Benefícios do useEffect() §

1. Separação de preocupações: Permite separar operações assíncronas e efeitos colaterais do código principal do componente.

2. Manutenção simples: Facilita o gerenciamento de operações assíncronas e cleanup relacionado em um único local.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)