1 de setembro de 2025Português

Aprenda como otimizar hooks customizados do React, entendendo e gerenciando dependências em useEffect. Melhore o desempenho e evite armadilhas comuns.

React Custom Hook Dependencies: Dominando a Otimização de Efeitos para Performance

React custom hooks são uma ferramenta poderosa para abstrair e reutilizar lógica entre seus componentes. No entanto, o manuseio incorreto das dependências dentro de `useEffect` pode levar a problemas de desempenho, re-renderizações desnecessárias e até mesmo loops infinitos. Este guia fornece uma compreensão abrangente das dependências do `useEffect` e das melhores práticas para otimizar seus custom hooks.

Entendendo useEffect e Dependências

O hook `useEffect` no React permite que você execute side effects em seus componentes, como busca de dados, manipulação do DOM ou configuração de assinaturas. O segundo argumento para `useEffect` é um array opcional de dependências. Este array diz ao React quando o efeito deve ser reexecutado. Se algum dos valores no array de dependências mudar entre as renderizações, o efeito será reexecutado. Se o array de dependências estiver vazio (`[]`), o efeito será executado apenas uma vez após a renderização inicial. Se o array de dependências for omitido completamente, o efeito será executado após cada renderização.

Por que as Dependências Importam

As dependências são cruciais para controlar quando seu efeito é executado. Se você incluir uma dependência que realmente não precisa acionar o efeito, você acabará com re-execuções desnecessárias, potencialmente impactando o desempenho. Por outro lado, se você omitir uma dependência que *precisa* acionar o efeito, seu componente pode não ser atualizado corretamente, levando a bugs e comportamento inesperado. Vamos dar uma olhada em um exemplo básico:

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

function ExampleComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    }

    fetchData();
  }, [userId]); // Array de dependências: só re-executa quando userId muda

  if (!userData) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.email}</p>
    </div>
  );
}

export default ExampleComponent;

Neste exemplo, o efeito busca dados do usuário de uma API. O array de dependências inclui `userId`. Isso garante que o efeito só seja executado quando a prop `userId` mudar. Se `userId` permanecer o mesmo, o efeito não será re-executado, evitando chamadas de API desnecessárias.

Armadilhas Comuns e Como Evitá-las

Várias armadilhas comuns podem surgir ao trabalhar com dependências `useEffect`. Entender essas armadilhas e como evitá-las é essencial para escrever código React eficiente e livre de bugs.

1. Dependências Ausentes

O erro mais comum é omitir uma dependência que *deveria* ser incluída no array de dependências. Isso pode levar a stale closures e comportamento inesperado. Por exemplo:

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

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // Problema potencial: `count` não é uma dependência
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Array de dependências vazio: efeito é executado apenas uma vez

  return <p>Count: {count}</p>;
}

export default Counter;

Neste exemplo, a variável `count` não está incluída no array de dependências. Como resultado, o callback `setInterval` sempre usa o valor inicial de `count` (que é 0). O contador não irá incrementar corretamente. A versão correta deve incluir `count` no array de dependências:

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

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Correto: usar atualização funcional
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Agora nenhuma dependência é necessária, pois usamos a forma de atualização funcional.

  return <p>Count: {count}</p>;
}

export default Counter;

Lição Aprendida: Sempre garanta que todas as variáveis usadas dentro do efeito que são definidas fora do escopo do efeito estejam incluídas no array de dependências. Se possível, use atualizações funcionais (`setCount(prevCount => prevCount + 1)`) para evitar precisar da dependência `count`.

2. Incluindo Dependências Desnecessárias

Incluir dependências desnecessárias pode levar a re-renderizações excessivas e degradação do desempenho. Por exemplo, considere um componente que recebe uma prop que é um objeto:

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

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Realiza algum processamento de dados complexo
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Problema: `data` é um objeto, então ele muda em cada renderização

  function processData(data) {
    // Lógica de processamento de dados complexa
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default DisplayData;

Neste caso, mesmo que o conteúdo do objeto `data` permaneça logicamente o mesmo, um novo objeto é criado em cada renderização do componente pai. Isso significa que `useEffect` será re-executado em cada renderização, mesmo que o processamento de dados não precise ser refeito. Aqui estão algumas estratégias para resolver isso:

Solução 1: Memoização com `useMemo`

Use `useMemo` para memoizar a prop `data`. Isso só irá recriar o objeto `data` se suas propriedades relevantes mudarem.

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

function ParentComponent() {
  const [value, setValue] = useState(0);

  // Memoiza o objeto `data`
  const data = useMemo(() => ({ value }), [value]);

  return <DisplayData data={data} />;
}

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Realiza algum processamento de dados complexo
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Agora `data` só muda quando `value` muda

  function processData(data) {
    // Lógica de processamento de dados complexa
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default ParentComponent;

Solução 2: Desestruturando a Prop

Passe propriedades individuais do objeto `data` como props em vez do objeto inteiro. Isso permite que `useEffect` só seja re-executado quando as propriedades específicas das quais ele depende mudarem.

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

function ParentComponent() {
  const [value, setValue] = useState(0);

  return <DisplayData value={value} />; // Passa `value` diretamente
}

function DisplayData({ value }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Realiza algum processamento de dados complexo
    const result = processData(value);
    setProcessedData(result);
  }, [value]); // Só re-executa quando `value` muda

  function processData(value) {
    // Lógica de processamento de dados complexa
    return { value }; // Envolve em objeto se necessário dentro de DisplayData
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default ParentComponent;

Solução 3: Usando `useRef` para Comparar Valores

Se você precisa comparar o *conteúdo* do objeto `data` e só re-executar o efeito quando o conteúdo mudar, você pode usar `useRef` para armazenar o valor anterior de `data` e realizar uma comparação profunda.

            
import React, { useState, useEffect, useRef } from 'react';
import { isEqual } from 'lodash'; // Requer a biblioteca lodash (npm install lodash)

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);
  const previousData = useRef(data);

  useEffect(() => {
    if (!isEqual(data, previousData.current)) {
      // Realiza algum processamento de dados complexo
      const result = processData(data);
      setProcessedData(result);
      previousData.current = data;
    }
  }, [data]); // `data` ainda está no array de dependências, mas verificamos a igualdade profunda

  function processData(data) {
    // Lógica de processamento de dados complexa
    return data;
  }

  if (!processedData) {
    return <p>Loading...</p>;
  }

  return <p>{processedData.value}</p>;
}

export default DisplayData;

Note: Comparações profundas podem ser caras, então use esta abordagem com moderação. Além disso, este exemplo depende da biblioteca `lodash`. Você pode instalá-la usando `npm install lodash` ou `yarn add lodash`.

Lição Aprendida: Considere cuidadosamente quais dependências são realmente necessárias. Evite incluir objetos ou arrays que são recriados em cada renderização se seus conteúdos permanecerem logicamente os mesmos. Use memoização, desestruturação ou técnicas de comparação profunda para otimizar o desempenho.

3. Loops Infinitos

Gerenciar incorretamente as dependências pode levar a loops infinitos, onde o hook `useEffect` é re-executado continuamente, fazendo com que seu componente congele ou trave. Isso geralmente acontece quando o efeito atualiza uma variável de estado que também é uma dependência do efeito. Por exemplo:

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

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

  useEffect(() => {
    // Busca dados de uma API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result); // Atualiza o estado `data`
      });
  }, [data]); // Problema: `data` é uma dependência, então o efeito é re-executado quando `data` muda

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

Neste exemplo, o efeito busca dados e os define para a variável de estado `data`. No entanto, `data` também é uma dependência do efeito. Isso significa que cada vez que `data` é atualizado, o efeito é re-executado, buscando dados novamente e definindo `data` novamente, levando a um loop infinito. Existem várias maneiras de resolver isso:

Solução 1: Array de Dependência Vazio (Apenas Carregamento Inicial)

Se você só quer buscar os dados uma vez quando o componente é montado, você pode usar um array de dependência vazio:

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

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

  useEffect(() => {
    // Busca dados de uma API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
      });
  }, []); // Array de dependência vazio: efeito é executado apenas uma vez

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

Solução 2: Use um Estado Separado para Carregamento

Use uma variável de estado separada para rastrear se os dados foram carregados. Isso impede que o efeito seja re-executado quando o estado `data` muda.

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

function InfiniteLoop() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (isLoading) {
      // Busca dados de uma API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        });
    }
  }, [isLoading]); // Só re-executa quando `isLoading` muda

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

Solução 3: Busca de Dados Condicional

Busque os dados somente se eles estiverem atualmente nulos. Isso impede buscas subsequentes após os dados iniciais terem sido carregados.

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

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

  useEffect(() => {
    if (!data) {
      // Busca dados de uma API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
        });
    }
  }, [data]); // `data` ainda é uma dependência, mas o efeito é condicional

  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>{data.value}</p>;
}

export default InfiniteLoop;

Lição Aprendida: Seja extremamente cuidadoso ao atualizar uma variável de estado que também é uma dependência do efeito. Use arrays de dependência vazios, estados de carregamento separados ou lógica condicional para evitar loops infinitos.

4. Objetos e Arrays Mutáveis

Ao trabalhar com objetos ou arrays mutáveis como dependências, as alterações nas propriedades do objeto ou nos elementos do array não acionarão automaticamente o efeito. Isso ocorre porque o React realiza uma comparação superficial das dependências.

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

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Problema: Alterações em `config.theme` ou `config.language` não acionarão o efeito

  const toggleTheme = () => {
    // Mutando o objeto
    config.theme = config.theme === 'light' ? 'dark' : 'light';
    setConfig(config); // Isso não acionará uma re-renderização ou o efeito
  };

  return (
    <div>
      <p>Theme: {config.theme}, Language: {config.language}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MutableObject;

Neste exemplo, a função `toggleTheme` modifica diretamente o objeto `config`, o que é uma má prática. A comparação superficial do React vê que `config` ainda é o *mesmo* objeto na memória, mesmo que suas propriedades tenham mudado. Para corrigir isso, você precisa criar um *novo* objeto ao atualizar o estado:

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

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]); // Agora o efeito será acionado quando `config` mudar

  const toggleTheme = () => {
    setConfig({ ...config, theme: config.theme === 'light' ? 'dark' : 'light' }); // Cria um novo objeto
  };

  return (
    <div>
      <p>Theme: {config.theme}, Language: {config.language}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MutableObject;

Ao usar o operador spread (`...config`), criamos um novo objeto com a propriedade `theme` atualizada. Isso aciona uma re-renderização e o efeito é re-executado.

Lição Aprendida: Sempre trate as variáveis de estado como imutáveis. Ao atualizar objetos ou arrays, crie novas instâncias em vez de modificar as existentes. Use o operador spread (`...`), `Array.map()`, `Array.filter()` ou técnicas semelhantes para criar novas cópias.

Otimizando Custom Hooks com Dependências

Agora que entendemos as armadilhas comuns, vamos dar uma olhada em como otimizar custom hooks gerenciando cuidadosamente as dependências.

1. Memoizando Funções com `useCallback`

Se o seu custom hook retorna uma função que é usada como uma dependência em outro `useEffect`, você deve memoizar a função usando `useCallback`. Isso impede que a função seja recriada em cada renderização, o que desnecessariamente acionaria o efeito.

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

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [url]); // Memoiza `fetchData` baseado em `url`

  useEffect(() => {
    fetchData();
  }, [fetchData]); // Agora `fetchData` só muda quando `url` muda

  return { data, isLoading, error };
}

function MyComponent() {
  const [userId, setUserId] = useState(1);
  const { data, isLoading, error } = useFetchData(`https://api.example.com/users/${userId}`);

  return (
    <div>
      {/* ... */}
    </div>
  );
}

export default MyComponent;

Neste exemplo, a função `fetchData` é memoizada usando `useCallback`. O array de dependências inclui `url`, que é a única variável que afeta o comportamento da função. Isso garante que `fetchData` só mude quando a `url` mudar. Portanto, o hook `useEffect` em `useFetchData` só será re-executado quando a `url` mudar.

2. Usando `useRef` para Referências Estáveis

Às vezes, você precisa acessar o valor mais recente de uma prop ou variável de estado dentro de um efeito, mas você não quer que o efeito seja re-executado quando esse valor mudar. Neste caso, você pode usar `useRef` para criar uma referência estável ao valor.

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

function LogLatestValue({ value }) {
  const latestValue = useRef(value);

  useEffect(() => {
    latestValue.current = value; // Atualiza a ref em cada renderização
  }, [value]); // Atualiza a ref quando `value` muda

  useEffect(() => {
    // Registra o valor mais recente após 5 segundos
    const timerId = setTimeout(() => {
      console.log('Latest value:', latestValue.current); // Acessa o valor mais recente da ref
    }, 5000);

    return () => clearTimeout(timerId);
  }, []); // Efeito é executado apenas uma vez na montagem

  return <p>Value: {value}</p>;
}

export default LogLatestValue;

Neste exemplo, a ref `latestValue` é atualizada em cada renderização com o valor atual da prop `value`. No entanto, o efeito que registra o valor só é executado uma vez na montagem, graças ao array de dependência vazio. Dentro do efeito, acessamos o valor mais recente usando `latestValue.current`. Isso nos permite acessar o valor mais atualizado de `value` sem fazer com que o efeito seja re-executado toda vez que `value` muda.

3. Criando Abstração Customizada

Crie um comparador customizado ou abstração se você estiver trabalhando com um objeto, e apenas um pequeno subconjunto de suas propriedades é importante para as chamadas `useEffect`.

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

// Comparador customizado para rastrear apenas mudanças de tema.
function useTheme(config) {
    const [theme, setTheme] = useState(config.theme);

    useEffect(() => {
        setTheme(config.theme);
    }, [config.theme]);

    return theme;
}

function ConfigComponent({ config }) {
    const theme = useTheme(config);

    return (
        <p>The current theme is {theme}</p>
    )
}

export default ConfigComponent;

Lição Aprendida: Use `useCallback` para memoizar funções que são usadas como dependências. Use `useRef` para criar referências estáveis a valores que você precisa acessar dentro de efeitos sem fazer com que os efeitos sejam re-executados. Ao lidar com objetos ou arrays complexos, considere criar comparadores customizados ou camadas de abstração para apenas acionar efeitos quando propriedades relevantes mudarem.

Considerações Globais

Ao desenvolver aplicativos React para um público global, é importante considerar como as dependências podem impactar a localização e a internacionalização. Aqui estão algumas considerações importantes:

1. Mudanças de Locale

Se o seu componente depende do locale do usuário (por exemplo, para formatar datas, números ou moedas), você deve incluir o locale no array de dependências. Isso garante que o efeito seja re-executado quando o locale mudar, atualizando o componente com a formatação correta.

            
import React, { useState, useEffect } from 'react';
import { format } from 'date-fns'; // Requer a biblioteca date-fns (npm install date-fns)

function LocalizedDate({ date, locale }) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    setFormattedDate(format(date, 'PPPP', { locale }));
  }, [date, locale]); // Re-executa quando `date` ou `locale` muda

  return <p>{formattedDate}</p>;
}

export default LocalizedDate;

Neste exemplo, a função `format` da biblioteca `date-fns` é usada para formatar a data de acordo com o locale especificado. O `locale` é incluído no array de dependências, então o efeito é re-executado quando o locale muda, atualizando a data formatada.

2. Considerações de Fuso Horário

Ao trabalhar com datas e horários, esteja atento aos fusos horários. Se o seu componente exibe datas ou horários no fuso horário local do usuário, você pode precisar incluir o fuso horário no array de dependências. No entanto, as mudanças de fuso horário são menos frequentes do que as mudanças de locale, então você pode considerar usar um mecanismo separado para atualizar o fuso horário, como um contexto global.

3. Formatação de Moeda

Ao formatar moedas, use o código de moeda e o locale corretos. Inclua ambos no array de dependências para garantir que a moeda seja formatada corretamente para a região do usuário.

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

function LocalizedCurrency({ amount, currency, locale }) {
  const [formattedCurrency, setFormattedCurrency] = useState('');

  useEffect(() => {
    setFormattedCurrency(new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount));
  }, [amount, currency, locale]); // Re-executa quando `amount`, `currency` ou `locale` muda

  return <p>{formattedCurrency}</p>;
}

export default LocalizedCurrency;

Lição Aprendida: Ao desenvolver para um público global, sempre considere como as dependências podem impactar a localização e a internacionalização. Inclua o locale, o fuso horário e o código de moeda no array de dependências quando necessário para garantir que seus componentes exibam os dados corretamente para usuários em diferentes regiões.

Conclusão

Dominar as dependências `useEffect` é crucial para escrever custom hooks React eficientes, livres de bugs e de alto desempenho. Ao entender as armadilhas comuns e aplicar as técnicas de otimização discutidas neste guia, você pode criar custom hooks que sejam reutilizáveis e fáceis de manter. Lembre-se de considerar cuidadosamente quais dependências são realmente necessárias, use memoização e referências estáveis quando apropriado e esteja atento a considerações globais, como localização e internacionalização. Ao seguir essas melhores práticas, você pode liberar todo o potencial dos custom hooks React e criar aplicativos de alta qualidade para um público global.

Este guia abrangente cobriu muito terreno. Para recapitular, aqui estão os principais pontos:

<li>Entenda o propósito das dependências: Elas controlam quando seu efeito é executado.</li> <li>Evite dependências ausentes: Garanta que todas as variáveis usadas dentro do efeito estejam incluídas.</li> <li>Elimine dependências desnecessárias: Use memoização, desestruturação ou comparação profunda.</li> <li>Evite loops infinitos: Tenha cuidado ao atualizar variáveis de estado que também são dependências.</li> <li>Trate o estado como imutável: Crie novos objetos ou arrays ao atualizar.</li> <li>Memoize funções com `useCallback`: Evite re-renderizações desnecessárias.</li> <li>Use `useRef` para referências estáveis: Acesse o valor mais recente sem acionar re-renderizações.</li> <li>Considere implicações globais: Leve em conta mudanças de locale, fuso horário e moeda.</li>

Ao aplicar esses princípios, você pode escrever custom hooks React mais robustos e eficientes que melhorarão o desempenho e a facilidade de manutenção de seus aplicativos.