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
Top comments (0)