Compreendendo useEffect no React: do zero ao herói

React se tornou uma das bibliotecas JavaScript mais populares para a construção de interfaces de usuário dinâmicas. Um dos ganchos mais importantes do React é useEffect, que permite aos desenvolvedores gerenciar efeitos colaterais em componentes funcionais. Os efeitos colaterais incluem operações como busca de dados, configuração de assinaturas ou manipulação manual do DOM. Neste blog, vamos nos aprofundar no que é useEffect, como funciona e fornecer exemplos passo a passo para melhor compreensão.

O que é useEffect?

No React, useEffect é um gancho integrado que permite executar efeitos colaterais em componentes de função. Os efeitos colaterais, como o nome sugere, são operações que afetam algo fora da função, como chamadas de API, temporizadores, registro ou atualização do DOM.

Antes da introdução de ganchos no React 16.8, você tinha que usar componentes de classe e métodos de ciclo de vida como componentDidMount, componentDidUpdate e componentWillUnmount para lidar com efeitos colaterais. Agora, com useEffect, esses eventos de ciclo de vida são combinados em uma única função para componentes funcionais.

Por que escolher useEffect?

useEffect é um gancho poderoso para gerenciar efeitos colaterais no React por vários motivos:

1. Simplificação de código: Elimina a necessidade de componentes baseados em classes e métodos de ciclo de vida, permitindo que você escreva um código mais limpo e baseado em funcionalidades.
2. Efeitos colaterais centralizados: Você pode gerenciar todos os efeitos colaterais, como busca de dados ou atualização do DOM, em um único lugar.
3. Legibilidade aprimorada: Simplifica como os eventos do ciclo de vida são gerenciados, tornando o código mais legível e menos complexo.
4. Flexibilidade: Com useEffect, você tem mais controle sobre quando e com que frequência os efeitos colaterais são executados, pois você pode definir dependências que determinam quando o efeito deve ser executado.

Como funciona?

O gancho useEffect aceita dois argumentos:

1. Função de efeito: Esta função contém a lógica de efeitos colaterais, como buscar dados ou configurar uma assinatura.
2. Matriz de dependência (opcional): Uma matriz de valores que determina quando o efeito deve ser executado novamente. Se algum valor na matriz de dependência for alterado, o efeito será executado novamente. Se você omitir esse array, o efeito será executado após cada renderização.

Aqui está uma estrutura básica:

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

Exemplo:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

Neste exemplo, os dados são obtidos de uma API quando o componente é renderizado pela primeira vez e o resultado é exibido na IU. Como passamos um array de dependência vazio, esse efeito é executado apenas uma vez após a primeira renderização.

Controlando os efeitos colaterais em useEffect

Controlando quando useEffect é executado, podemos otimizar o desempenho e garantir que os efeitos colaterais ocorram no momento correto.

Efeitos sem limpeza

Nem todos os efeitos requerem limpeza. A limpeza só é necessária quando você precisa remover ou redefinir algo após a execução do efeito, como limpar temporizadores ou cancelar assinatura de fluxos de dados.

Por exemplo, aqui está um cenário em que nenhuma limpeza é necessária:

import React, { useState, useEffect } from 'react';

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

Nesse caso, o efeito é executado sempre que o estado da contagem muda. Como não estamos configurando assinaturas nem gerenciando recursos externos, nenhuma limpeza é necessária.

Efeitos com limpeza

Se o seu efeito envolver a configuração de assinaturas ou cronômetros, você provavelmente precisará fazer uma limpeza após o efeito. Por exemplo, imagine um cenário onde queremos configurar um cronômetro:

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

Aqui está o que está acontecendo:

1. A função setInterval configura um cronômetro que incrementa o tempo a cada segundo.
2. A função de limpeza (retornada por useEffect) limpa o intervalo quando o componente é desmontado. Isso garante que o cronômetro não continue funcionando após a remoção do componente.

Exemplos de cenários useEffect

Vamos explorar alguns cenários comuns onde useEffect é particularmente útil.

Buscando dados na montagem do componente

Buscar dados quando o componente é montado é um dos casos de uso mais comuns para useEffect.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

Atualizando o DOM

Você pode usar useEffect para manipular manualmente o DOM após a renderização, embora isso deva ser feito com moderação, pois o React gerencia o DOM de forma eficiente.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

Limpeza na desmontagem de componentes

Se você tiver recursos como assinaturas ou ouvintes de eventos que precisam ser limpos, você pode usar a função de retorno em useEffect para lidar com isso.

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

Perguntas frequentes

1. O que acontece se eu omitir a matriz de dependência em useEffect?

Se você omitir a matriz de dependência, useEffect será executado após cada renderização, o que pode causar problemas de desempenho para efeitos colaterais caros, como chamadas de API.

2. Posso executar useEffect apenas uma vez?

Sim, passar uma matriz de dependência vazia [] garante que o efeito seja executado apenas uma vez após a montagem do componente.

3. Qual é a função de limpeza em useEffect?

A função de limpeza é uma forma de desfazer o efeito quando o componente é desmontado ou antes que o efeito seja executado novamente. É útil para limpar cronômetros, ouvintes de eventos ou assinaturas.

Concluindo, useEffect é um gancho poderoso e flexível que simplifica o gerenciamento de efeitos colaterais no React. Ao controlar quando os efeitos colaterais são executados e limpar quando necessário, você pode otimizar seus componentes e evitar novas renderizações desnecessárias ou vazamentos de memória. Experimente os exemplos acima para dominar a arte do gerenciamento de efeitos colaterais!