Quando e como usar o useMemo no React

Ao trabalhar no desenvolvimento de front-end, você pode ter encontrado useMemo. Para quem não está familiarizado, explicaremos como usar o useMemo no React e também os casos de uso mais importantes/proeminentes.

O que é useMemo?

useMemo é um ótimo gancho integrado que pode ajudar no desempenho do seu aplicativo da web. Sabemos que em react , os componentes são renderizados sempre que há uma mudança no estado ou props do componente.

Os componentes que são renderizados novamente também recalcularão as funções que estão sendo usadas nele.

Portanto, se houver funções pesadas e caras, o desempenho pode ser afetado, pois elas devem ser computadas todas as vezes. useMemo ajuda a memorizar essas funções para otimizar o desempenho.

Como o useMemo funciona no React?

Para entender useMemo, precisamos refletir sobre o que é memoização .

Se houver uma função cara, como buscar muitos dados, a memoização é uma forma de armazenar o resultado dessa função para que ela não precise ser chamada repetidamente.

useMemo pegará a função que está agrupando e armazenará em cache os resultados dessa função para que ela possa ser fornecida a você quando necessário, sem fazer os cálculos novamente.

Como você usa o useMemo no React?

Como um gancho integrado, você pode importar o gancho do React e usá-lo no nível superior.

Em seguida, você pode agrupar sua computação cara com useMemo declarando alguma constante ou variável e atribuindo-a ao resultado de seu gancho.

Não se esqueça de adicionar suas dependências, pois é assim que o useMemo determina se deve recalcular a função novamente.

Se sua dependência mudar, então useMemo saberá recalcular o valor para que esteja armazenando em cache o resultado correto o tempo todo.

 import { useMemo } from 'react' ; function someExpensiveFunction ( n ) {   return n * n; } function myFunction ( {n} ) {   const result = useMemo( () => someExpensiveFunction(n), [n]);   return (       < div > {result} </ div >
 ); }

Por exemplo, se você passou o valor 5 para

 n

 n

Isso é especialmente útil quando seu aplicativo de front-end está fazendo solicitações a uma API.

Essas solicitações podem ser caras, especialmente se você estiver buscando grandes quantidades de dados.

Talvez seu aplicativo tenha alguns componentes que precisam desses dados, mas você não deseja fazer uma chamada de API toda vez que o componente for renderizado.

Então, armazenar em cache seus resultados com useMemo pode ser sua melhor aposta.

 import React, { useMemo } from 'react' ; import axios from 'axios' ; const ApiComponent = () => {   const memoizedResults = useMemo( async () => {       try {           const apiResponse = await axios.get( 'http://apicall.com/somedata' );           return apiResponse.data; } catch (error) {           return error; } }, []);   return (       < div > {apiResponse} </ div >
 ) }

Como você pode ver, nossa dependência está vazia porque queremos que ela seja renderizada apenas uma vez, já que o valor não será realmente alterado. Queremos apenas fazer a chamada da API uma vez, quando ela for renderizada pela primeira vez.

Em seguida, esse valor será reutilizado em renderizações subsequentes.

Quando usar o useMemo é uma má ideia?

Por mais útil que seja o gancho, usar useMemo constantemente não é necessariamente uma boa ideia. Pode ser tentador agrupar todas as funções que você escreve com useMemo para 'salvar' os cálculos.

No entanto, usá-lo quando não é necessário pode, na verdade, tornar o aplicativo mais lento.

1. Cálculos triviais

Se a função que você está agrupando com useMemo for um cálculo simples, então o custo de usar useMemo pode ser mais importante.

Se você for capaz de determinar que o peso de sua função é muito pequeno, por exemplo, tempo O(n), então é apropriado determinar que o gancho não é necessário.

2. Quando sua função pode afetar estados e variáveis externas

Se sua função envolve fazer modificações em outras variáveis globais, ou depende delas, usar useMemo pode não ser uma boa ideia.

Conforme descrito anteriormente, useMemo apenas recalcula a função quando uma dependência é alterada.

No entanto, se a função fizer uso de variáveis ou chamadas que não sejam necessariamente uma alteração de dependência, ela não recalculará o valor, fazendo com que o resultado armazenado em cache fique incorreto.

Qual é a diferença entre useMemo e useCallback?

Alguns de vocês também podem estar familiarizados com useCallback, que serve a um propósito semelhante ao useMemo. Este artigo não vai se aprofundar em useCallback, mas vamos diferenciar quando usar as duas funções.

Pode ser fácil confundir useMemo e useCallback, porque ambos são ganchos que funcionam para otimizar seu aplicativo memorizando algo para você. No entanto, é importante notar que o que eles estão memorizando é diferente.

Na maioria dos casos, useMemo memoriza valores enquanto useCallback memoriza funções. Como visto no nome, useCallback é usado para memorizar funções de retorno de chamada, especialmente aquelas que são passadas para componentes filhos como props. As funções de retorno de chamada podem depender de determinados valores ou referências que podem mudar com o tempo, o que significa que as atualizações dessas funções causarão uma nova renderização nos componentes que as utilizam. Portanto, memorizá-los pode ajudar a evitar novas renderizações, o que pode nos custar otimização.

No entanto, como useMemo pode memorizar funções e valores, ele pode ser usado no lugar dos hooks useCallback. Ainda assim, é importante considerar o contexto da sua situação e usar ganchos de forma adequada para usá-los conforme pretendido.

Pensamentos finais

useMemo em geral… é um gancho excelente e flexível que pode memorizar valores para você e evitar novas renderizações. Ao usar o gancho estrategicamente, você pode otimizar seu aplicativo, reduzindo os cálculos e permitindo que o usuário tenha uma experiência mais rápida e suave.

Deixe o useMemo proporcionar aos seus usuários uma... experiência memorável!