⚛️Diferenças entre useMemo e useCallback

No React, useMemo e useCallback são hooks que visam otimizar o desempenho memorizando valores. No entanto, eles servem a propósitos distintos.

useMemo

useMemo é usado para memorizar o resultado de um cálculo. É necessária uma função e uma matriz de dependências e apenas recalcula o resultado quando as dependências mudam. Isto pode ser particularmente útil para cálculos caros ou ao lidar com transformações de dados complexas.

Casos de uso:

importar { useMemo } de 'react';

const MeuComponent = ({ data }) => {
   const processedData ​​= useMemo(() => {
     // Lógica cara
     retornar processData(dados);
   }, [data]);

   return <div>{processedData}</div>;
};

Neste exemplo, processedData só será recalculado se a propriedade data for alterada, evitando cálculos desnecessários em cada renderização.

useCallback

useCallback é empregado para memorizar uma função de retorno de chamada. Também requer uma função e uma matriz de dependências. O retorno de chamada só é recriado quando as dependências mudam, o que é benéfico ao passar retornos de chamada para componentes filhos para evitar novas renderizações desnecessárias.

Casos de uso:

importar { useCallback } de 'react';

const ParentComponent = () => {
   const handleClick = useCallback(() => {
     // Lida com a lógica do clique
     console.log('Botão clicado!');
   }, []); // Sem dependências, o retorno de chamada permanece constante

   return <ChildComponent onClick={handleClick} />;
};

const ChildComponent = ({ onClick }) => {
   // Componente filho recebe retorno de chamada memorizado
   return <button onClick={onClick}>Clique em mim</button>;
};

Neste cenário, handleClick permanece o mesmo em todas as renderizações de ParentComponent porque não tem dependências, evitando novas renderizações desnecessárias de ChildComponent.

Em resumo, useMemo serve para memorizar valores, enquanto useCallback serve para memorizar funções de retorno de chamada. Entender quando usar cada gancho garante desempenho ideal em seus aplicativos React.

Cover Photo by Dan Meyers on Unsplash