Quando usar useMemo e useCallback: um breve guia para fãs do React

Se você é um desenvolvedor React, você já deve ter se deparado com discussões online sobre React useMemo vs useCallback e acabou mais confuso do que nunca. Pode ser muito difícil descobrir a diferença entre useMemo e useCallback. Isso está ok! Pode ser difícil entender os React-Hooks no começo, mas eles podem ser extremamente úteis no futuro.

Neste artigo, mostraremos a diferença entre useCallback e useMemo e quando usar useCallback e useMemo.

A diferença entre useMemo e useCallback

Dois hooks embutidos foram introduzidos com o React 16.8. Esses recursos foram introduzidos para otimizar o desempenho. A diferença entre useMemo e useCallback parece insignificante, então tentaremos esclarecer a confusão.

O que são React-Hooks?

Hooks são novos recursos introduzidos no React que permitem o useState e outros recursos do React sem escrever uma classe. Hooks são métodos e funções que “ligam” aos recursos de estado e ciclo de vida do React.

useCallback vs useMemo

O gancho useCallback é usado sempre que um componente filho é renderizado repetidamente sem realmente precisar. Ao usar useCallback, você pode evitar essa nova renderização desnecessária retornando a mesma instância dessa função que está sendo passada em vez de criar uma nova instância a cada vez. Isso pode economizar uma quantidade considerável de tempo (e dinheiro gasto em horas de desenvolvimento). Passar uma matriz de dependências com um retorno de chamada memoizado resultará em uma versão memoizada que só será alterada quando a dependência for alterada.

useMemo é usado no componente funcional do React. É usado para retornar um valor memorizado. A memorização refere-se ao processo de economizar tempo de recompilação retornando um resultado armazenado em cache em vez de recompilar uma função com o mesmo argumento novamente para a próxima execução. O resultado armazenado em cache é retornado na próxima vez que for chamado. Os ganchos useMemo fornecem valores mapeados na memória.

Claramente, existem algumas semelhanças. Tanto no useMemo quanto no useCallback, o gancho aceita uma função, bem como uma matriz de dependências. No entanto, useCallback lembrará o valor retornado e useMemo lembrará a função. Em outras palavras, um armazena em cache um tipo de valor e o outro armazena em cache uma função.

• LEIA MAIS – Como e por que você deve manter seus arquivos organizados
• As 9 principais maneiras de usar dispositivos eletrônicos em sala de aula

Quando usar useCallback vs useMemo

Então, quando você deve usar useCallback e quando useMemo é a melhor opção? Vejamos um exemplo. Se um código computacionalmente pesado e caro aceita argumentos e retorna um valor, useMemo é a melhor opção. Dessa forma, você pode continuar referenciando o valor entre as renderizações sem executar novamente o código e desperdiçar seu tempo e poder computacional.

Se você precisar manter uma instância de função persistente em várias renderizações, use useCallback porque essencialmente coloca a função fora do escopo do seu componente React para mantê-la intacta.

O que é useEffect?

Já mencionamos o array de dependências, que você pode ter encontrado ao usar useEffect. useEffect é outro gancho React. É usado para lidar com efeitos colaterais em componentes funcionais usando a lógica do argumento de retorno de chamada. Dependências são a lista de dependências do efeito colateral, por exemplo, props ou valores de estado.

Este gancho mostra ao React que o componente precisa realizar uma ação após a renderização. Quando o DOM for atualizado, o efeito que você passar será armazenado. Você também pode realizar a busca de dados para obter esse resultado.

Resumindo, useCallback, useMemo e useEffect estão todos preocupados em melhorar o desempenho entre a renderização de componentes em aplicativos React.

É importante não abusar dos ganchos, no entanto. Os ganchos introduzem uma lógica nova e complexa e podem ter o efeito oposto ao pretendido, criando problemas de desempenho em vez de resolvê-los. useMemo só deve ser usado para cálculos muito caros.

Não use useMemo ou useCallback para corrigir problemas fundamentais com seu aplicativo. Eventualmente, esses problemas vão ressurgir e assombrá-lo, então é melhor atender primeiro a quaisquer falhas conhecidas.

• LEIA MAIS – Como escolher o melhor CMS
• Quais são os prós e contras dos métodos criptográficos?

Conclusão

Espero que este artigo tenha sido perspicaz e você entenda melhor os dois ganchos. Resumindo:

• Ambos aceitam uma função e um array de dependências
• useMemo memoriza o valor retornado, useCallback memoriza a função.

A diferença entre useMemo e useCallback é bem clara! Essas ferramentas têm o potencial de economizar tempo e dinheiro, mas somente se forem usadas no contexto e ambiente adequados.

Espero que este tutorial tenha ajudado você a saber sobre quando usar useMemo e useCallback: um breve guia para fãs de React . Se você quiser dizer alguma coisa, deixe-nos saber através das seções de comentários. Se você gostou deste artigo, compartilhe-o e siga o WhatVwant no Facebook, Twitter e YouTube para obter mais dicas técnicas.

Quando usar useMemo e useCallback – FAQs