useMemo e useCallback são dois ganchos React poderosos que desempenham um papel crucial na prevenção de novas renderizações desnecessárias que resultam na otimização do desempenho do componente. Eles são ferramentas essenciais para os desenvolvedores criarem aplicativos React responsivos e eficientes.

Neste guia, explicaremos useMemo e useCallback quais são suas semelhanças e como eles diferem um do outro. Vamos entender como implementá-los, quando usar cada um.

por que você deveria usar useMemo ou useCallback

Normalmente, no React, a maioria dos cálculos é rápida, mas às vezes você tem um cálculo em um array muito grande ou algum cálculo caro que não precisa ser executado a cada nova renderização.

useMemo e useCallback podem ajudar a resolver esse problema armazenando em cache esses cálculos caros entre re-renderizações.

o que é useMemo e como usá-lo.

useMemo é um gancho React que armazena em cache o resultado de um cálculo entre re-renderizações e leva dois argumentos:

• CalculadValue: a função que calcula o valor que você deseja armazenar em cache. A função não deve aceitar nenhum parâmetro e deve ser pura e retornar qualquer tipo de valor. O React retornará o mesmo resultado calculado se as dependências não tiverem sido alteradas. Caso contrário, ele calculará um novo resultado e o armazenará em cache.
• dependências: a lista de todas as referências de valores reativos que estão dentro do seu CalculadValue, de constantes de variáveis ​​de estado e chamadas de função. O React tentará comparar cada valor reativo com seu valor anterior usando a comparação Object.it.

uso de useMemo

Para armazenar em cache um cálculo entre re-renderizações, envolva-o com um gancho useMemo no nível superior do componente.

useMemo(fn, dependências)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

Observe que o primeiro parâmetro de useMemo é uma função sem parâmetros.

Na primeira vez, o React calculará o valor do resultado do primeiro parâmetro de useMemo e, em seguida, memorizará o segundo parâmetro que é a lista de dependências. O React armazenará em cache o resultado calculado entre as novas renderizações e apenas recalculará o resultado quando um dos valores das dependências for alterado.

o que é useCallback e como usá-lo.

useCallback hook é o mesmo que useMemo hook com a única diferença de que este gancho irá armazenar em cache a função (primeiro parâmetro para useCallback) sem calcular o valor. Além disso, a função pode aceitar parâmetros diferentes de useMemo.

Para usar useCallback você precisa passar os parâmetros:

• Uma definição de função que precisa ser armazenada em cache.
• Lista de dependências

const cachedFn = useCallback(fn, dependências)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

Quando usar useMemo em vez de useCallback

Se você está preocupado principalmente em otimizar o resultado do cálculo, use useMemo.
Se você está preocupado principalmente em evitar novas renderizações desnecessárias devido a alterações de função, use useCallback.

Ignorando novas renderizações de um componente

Às vezes você terá um componente pai que precisa ser renderizado novamente, o que resultará também na nova renderização do componente filho. É possível armazenar em cache um componente usando memo.

Vamos supor que temos um componente Todolist com estado de tema e um componente List como filho. Sempre que o estado do tema muda, o componente da lista é renderizado novamente, o que não é necessário. para resolver esse problema, use o memorando.

envolvemos o componente funcional de List com memorando.

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Conclusão

Neste guia completo, entendemos os ganchos useMemo e useCallback, como usar cada um deles, quando usar cada um deles e explicamos seus benefícios para otimizar o desempenho do aplicativo React.