Padrões Comuns do useEffect

1. Buscar Dados de uma API

function ListaUsuarios() {
  const [usuarios, setUsuarios] = useState([]);
  const [carregando, setCarregando] = useState(true);
  const [erro, setErro] = useState(null);

  useEffect(() => {
    const buscarUsuarios = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) throw new Error('Erro ao buscar dados');
        const dados = await response.json();
        setUsuarios(dados);
      } catch (err) {
        setErro(err.message);
      } finally {
        setCarregando(false);
      }
    };

    buscarUsuarios();
  }, []); // Array vazio = executa uma vez

  if (carregando) return <p>Carregando...</p>;
  if (erro) return <p>Erro: {erro}</p>;

  return (
    <ul>
      {usuarios.map(usuario => (
        <li key={usuario.id}>{usuario.name}</li>
      ))}
    </ul>
  );
}

2. Timer com Cleanup

function Relogio() {
  const [tempo, setTempo] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTempo(new Date());
    }, 1000);

    // Cleanup: limpa o timer quando o componente desmonta
    return () => {
      clearInterval(timer);
    };
  }, []);

  return <h2>{tempo.toLocaleTimeString()}</h2>;
}

3. Listener de Eventos

function TamanhoJanela() {
  const [largura, setLargura] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setLargura(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup: remove o listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <p>Largura da janela: {largura}px</p>;
}

4. LocalStorage com Sincronização

function ConfiguracaoTema() {
  const [tema, setTema] = useState(() => {
    // Inicializa com valor do localStorage
    return localStorage.getItem('tema') || 'claro';
  });

  useEffect(() => {
    // Salva no localStorage quando tema muda
    localStorage.setItem('tema', tema);
    
    // Aplica tema ao documento
    document.body.className = tema;
  }, [tema]);

  return (
    <button onClick={() => setTema(tema === 'claro' ? 'escuro' : 'claro')}>
      Mudar para tema {tema === 'claro' ? 'escuro' : 'claro'}
    </button>
  );
}

5. Debounce de Pesquisa

function PesquisaProdutos() {
  const [termo, setTermo] = useState('');
  const [resultados, setResultados] = useState([]);

  useEffect(() => {
    // Não pesquisa se o termo estiver vazio
    if (!termo) {
      setResultados([]);
      return;
    }

    // Debounce: aguarda 500ms após parar de digitar
    const timeoutId = setTimeout(() => {
      // Simula busca de API
      console.log('Pesquisando por:', termo);
      // fetch(`/api/produtos?q=${termo}`).then(...);
    }, 500);

    // Cleanup: cancela o timeout se o usuário continuar digitando
    return () => clearTimeout(timeoutId);
  }, [termo]);

  return (
    <div>
      <input
        type="text"
        value={termo}
        onChange={(e) => setTermo(e.target.value)}
        placeholder="Pesquisar produtos..."
      />
    </div>
  );
}

6. Dependências Múltiplas

function CalculadoraPreco({ quantidade, precoUnitario }) {
  const [total, setTotal] = useState(0);
  const [desconto, setDesconto] = useState(0);

  useEffect(() => {
    // Recalcula quando quantidade OU preço mudam
    const subtotal = quantidade * precoUnitario;
    
    // Aplica desconto progressivo
    if (quantidade >= 10) {
      setDesconto(0.1); // 10% de desconto
    } else if (quantidade >= 5) {
      setDesconto(0.05); // 5% de desconto
    } else {
      setDesconto(0);
    }
    
    setTotal(subtotal * (1 - desconto));
  }, [quantidade, precoUnitario, desconto]);

  return (
    <div>
      <p>Subtotal: R$ {(quantidade * precoUnitario).toFixed(2)}</p>
      {desconto > 0 && <p>Desconto: {(desconto * 100)}%</p>}
      <p>Total: R$ {total.toFixed(2)}</p>
    </div>
  );
}

Dicas Importantes

1. Evite Loops Infinitos

// ❌ ERRADO: Causa loop infinito
useEffect(() => {
  setCount(count + 1);
}); // Sem dependências = executa sempre

// ✅ CORRETO: Executa uma vez
useEffect(() => {
  setCount(count + 1);
}, []);

2. Não Esqueça do Cleanup

// ❌ Vazamento de memória
useEffect(() => {
  const timer = setInterval(() => {}, 1000);
}, []);

// ✅ Com cleanup
useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer);
}, []);

3. Use Dependências Corretas

// ⚠️ Aviso do ESLint sobre dependências faltando
useEffect(() => {
  console.log(count); // usa 'count' mas não lista como dependência
}, []); // ESLint avisará sobre isso

// ✅ Correto
useEffect(() => {
  console.log(count);
}, [count]);