useEffect: o guia prático

Efeitos colaterais em React sem leaks. Quando rodar, como limpar e a regra do array de dependências.

useEffect roda efeitos colaterais: buscar dados, subscriptions, timers. O array de dependências controla quando ele executa.

As três formas

Exemplos.tsx

// 1. roda a cada render — raramente o que você quer
useEffect(() => {
  console.log("renderizou");
});

// 2. roda só uma vez (mount)
useEffect(() => {
  buscarDados();
}, []);

// 3. roda quando id mudar
useEffect(() => {
  buscarUsuario(id);
}, [id]);

Função de limpeza

tsx

useEffect(() => {
  const timer = setInterval(() => tick(), 1000);

  // roda antes do próximo efeito e no unmount
  return () => clearInterval(timer);
}, []);

Não minta no array de dependências. Se você usa uma variável no efeito, coloque-a ali — senão trabalha com valores defasados. Linter reclama por um motivo.

todos os tutoriais

Continue aprendendo

⚛️

React: useState sem mistério

7 min