Você usa o useMemo da maneira correta no React?

Nos últimos meses me surgiram oportunidades de analisar aplicações buscando por problemas em suas performances e, ironicamente, o que encontrei foi um excesso de useMemo(), hook que é popularmente utilizado para lidar com o problema que eu estava procurando corrigir.

Mas o que é o useMemo?

Ele é um dos hooks nativos da biblioteca, segundo o próprio React o seu funcionamento se dá da seguinte forma: Recebe uma função create e um array como argumentos. O useMemo só recuperará o valor memoizado quando o array receber uma atualização. Esta otimização ajuda a evitar cálculos caros em cada renderização.

Entendi o que ele faz, já posso colocar no meu código?

A documentação do React não deixa claro qual o cenário ideal para a utilização do hook mas a verdade é que existem muitos conteúdos na internet explicando quando ele não deve ser usado.

E como muitos outros posts por aí, eu também vou lembrar que “otimização prematura é a raiz de todo o mal” e utilizar o useMemo em qualquer situação acabará gerando o efeito reverso, causando um grande problema de performance no seu código!

Anotado: Nunca usar o useMemo(), certo?!

Se você chegou até aqui e está com pavor do hook ou está se questionando “Qual foi a mente maligna que desenvolveu uma função que faz o oposto do que promete?”, pode ficar mais calmo que, na verdade, sabendo aplicar o useMemo() em melhores situações ele será extremamente produtivo e performático!

A chave é focar no problema!

Para ter uma utilização positiva você deve primeiro analisar se existe realmente um problema de performance e, depois, se o useMemo() se encaixa na solução, isso evitará o famoso “Overengineering” e reduzirá bastante a chance de aumentar o problema ao invés de corrigi-lo.

Aqui vão alguns casos que o hook pode te ajudar bastante:

Você notou que um de seus componentes tem uma renderização lenta e, dentro dele, você acaba fazendo cálculos em incontáveis componentes filhos (geralmente renderizados via `Array.map()`).

Sua aplicação para de responder por ter que lidar e formatar com uma grande quantidade de dados vindos da API.

Eu sei que é muito bacana quando descobrimos algo novo e queremos usar isso em todo lugar, porém, isso acaba colocando a solução como foco e não o problema, gerando o resultado contrário do qual queremos!