Dominando o React Hook: useEffect

O hook useEffect permite executar efeitos colaterais em componentes funcionais. Mas o que são "efeitos colaterais"? São operações que afetam algo fora do escopo da função, como buscar dados de uma API, definir uma inscrição ou manipular o DOM manualmente.

O Array de Dependências

A chave para dominar o useEffect é entender o array de dependências. É ele que diz ao React quando re-executar o efeito.

• Sem array: O efeito é executado após cada renderização.
• Array vazio []: O efeito é executado apenas uma vez, após a montagem do componente.
• Array com valores [prop, state]: O efeito é executado na montagem e sempre que qualquer um dos valores no array mudar.

Limpeza de Efeitos

Alguns efeitos precisam de uma "limpeza", como cancelar uma inscrição ou um timer. Para isso, basta retornar uma função do seu efeito.

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('tick');
  }, 1000);

  // Função de limpeza
  return () => {
    clearInterval(timerId);
  };
}, []);