Aumentando o desempenho do React: useCallback vs. useMemo Hooks

Os ganchos useCallback e useMemo do React são cruciais para otimizar o desempenho em seus aplicativos. Compreender quando e como usá-los pode evitar novas renderizações desnecessárias e garantir que seu aplicativo funcione sem problemas. Neste artigo, mergulharemos em exemplos reais de uso eficaz de useCallback e useMemo.

Quando usar useCallback

O gancho useCallback retorna uma versão memorizada da função de retorno de chamada, o que significa que ele apenas recria a função se uma de suas dependências for alterada. Isso é particularmente útil ao passar funções como adereços para componentes filhos para evitar que eles sejam renderizados novamente desnecessariamente.

Exemplo em tempo real: evitando novas renderizações desnecessárias

Suponha que você tenha um componente pai que passa uma função para um componente filho. Sem useCallback, o componente filho seria renderizado novamente toda vez que o componente pai fosse renderizado, mesmo que a lógica da função não tivesse mudado.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count   1);
  }, [count]);

  return (
    

      
Count: {count}
      
    
  );
};

export default ParentComponent;

No exemplo acima, handleIncrement é memorizado com useCallback. O ChildComponent só será renderizado novamente quando a contagem for alterada, evitando novas renderizações desnecessárias e melhorando o desempenho.

Quando usar useMemo

O gancho useMemo é usado para memorizar o resultado de uma função, recalculando o resultado armazenado em cache apenas quando uma de suas dependências muda. É útil para otimizar o desempenho em situações em que uma função executa um cálculo caro.

Exemplo em tempo real: otimizando cálculos caros

Digamos que você tenha um componente que executa uma operação computacionalmente cara, como filtrar uma lista grande.

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)}
        placeholder="Filter items"
      />
      

        {filteredItems.map((item, index) => (
          
{item}
        ))}
      
    
  );
};

export default ExpensiveComponent;

Neste exemplo, useMemo é usado para armazenar em cache o resultado da filtragem da matriz de itens. Dessa forma, a dispendiosa operação de filtragem só é recalculada quando os itens ou o filtro são alterados, evitando cálculos desnecessários.

Diretrizes para usar useCallback e useMemo

• Use useCallback ao passar funções para componentes filhos para evitar novas renderizações desnecessárias.
• Use useMemo para cálculos caros que não precisam ser recalculados em cada renderização.
• Evite usá-los em excesso. A memorização adiciona complexidade e às vezes pode dificultar a leitura do código. Use-os apenas quando identificar um problema de desempenho.
• Lembre-se da matriz de dependências. Sempre especifique as dependências com precisão; caso contrário, você poderá encontrar bugs ou comportamentos inesperados.

Conclusão

Os ganchos useCallback e useMemo do React são ferramentas poderosas para otimizar o desempenho do componente, evitando novas renderizações desnecessárias e cálculos caros. Ao aplicar cuidadosamente esses ganchos, você pode garantir que seu aplicativo React seja executado com eficiência.