Série React Hooks: useMemo

Olá pessoas, bora continuar nossa séria sobre os hooks do nosso querido ReactJS, e hoje vamos falar sobre um dos seus hooks úteis chamado useMemo. Se você já trabalha com React há algum tempo, talvez tenha se deparado com situações em que precisa otimizar o desempenho dos seus componentes. Bem, não se preocupe! useMemo está aqui para salvar o dia.

Caso queriam ver os outros artigos sobre essa série, segue links de artigos anteriores:

• Série React Hooks: useImperativeHandle
• Série React Hooks: useDeferredValue
• Série React Hooks: useCallback
• Série React Hooks: useSyncExternalStore
• Série React Hooks: useRef

Mas, afinal de contas, o que diabos o useMemo faz? 🤔

Calma, meu pequeno gafanhoto, tem tudo a ver com memoização. Hã?

Primeiramente vamos resumir o que é memoização né ... Memoização é uma técnica de otimização que armazena os resultados de funções caras e os retorna quando os mesmos argumentos são fornecidos novamente, evitando a necessidade de recalcular o resultado.

Sim, eu sei, parece sofisticado, mas é na verdade bem simples. Quando você usa o useMemo, está dizendo ao React para lembrar do valor que uma função retorna e recalcular apenas se as dependências mudarem. Em outras palavras, ele ajuda a evitar cálculos desnecessários e melhora o desempenho do seu aplicativo.

Sabe quando você tem um cálculo super mega pesado acontecendo no seu componente React e isso está deixando tudo mais lento? Pois é meu pequeno gafanhoto, é aí que o useMemo vem para salvar o nosso dia!

Resumindo ele é um hook que te ajuda a otimizar seu componente, memorizando (ou armazenando em cache) o resultado de uma função, para que não precise ser recalculado toda vez que seu componente for renderizado novamente.

OK mas como ele funciona ?

Bom o useMemo tem uma sintexe bem simples de se usar. Você só irá precisa passar uma função e um array de dependências, e ele retornará o resultado memorizado. Se as dependências não mudaram desde a última renderização, o React usará o resultado em cache em vez de chamar a função novamente (ai está a magica). Como falei ela tem uma sintexe bemmm básica, saca só o exemplo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a,b]);

Confuso ainda? Bora para um exemplo simples:

import React, { useMemo } from 'react';

const MyComponent: React.FC = () => {
  const expensiveResult = useMemo(() => {
    // Some heavy calculations here
    return someExpensiveFunction();
  }, [dependency1, dependency2]);

  // Rest of your component code
  return (
    // JSX stuff goes here
  );
};

Vamos analisar esse exemplo, nele estamos definindo uma variável chamada expensiveResult usando useMemo. Dentro da função useMemo, a gente realiza alguns cálculos complexos ou chama uma função muito custosa parao nosso projeto (no nosso caso, someExpensiveFunction()), e esse resultado é armazenado em expensiveResult.

O segundo argumento do useMemo é um array de dependências que indica ao React quando recalcular o valor. Se alguma das dependências mudar, a função será reexecutada.

A beleza do useMemo está em permitir que você otimize seus componentes evitando cálculos desnecessários. Vamos para um outro exemplo, digamos que você tem um componente que exibe uma lista de usuários e seus detalhes, mas você só quer mostrar os usuários que estão ativos. Nesse cénario podemos usar o useMemo para filtrar a lista e evitar recalculá-la a cada renderização. Vamos ver como ficaria:

import React, { useMemo } from 'react';

interface User {
  id: number;
  name: string;
  isActive: boolean;
}

const UserList: React.FC<{ users: User[] }> = ({ users }) => {
  const activeUsers = useMemo(() => {
    return users.filter((user) => user.isActive);
  }, [users]);

  return (
    <ul>
      {activeUsers.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Nesse novo exemplo, a função de cálculo passada para o useMemo filtra os usuários com base na propriedade isActive, retornando apenas os usuários ativos. A dependência fornecida é o array users, ou seja, sempre que o array de usuários for alterado, a função de cálculo será executada novamente.

O resultado do useMemo é armazenado na variável activeUsers. Essa variável contém o resultado da filtragem dos usuários ativos. Em seguida, é renderizada uma lista não ordenada <ul>, onde cada elemento <li> representa um usuário ativo. O atributo key é definido como o id do usuário para ajudar o React a otimizar a renderização de lista.

A utilização do useMemo neste exemplo é útil para evitar que o cálculo de usuários ativos seja realizado a cada renderização do componente UserList. Como a função de cálculo é executada apenas quando a dependência users é alterada, se a prop users não sofrer alterações, o valor memoizado será retornado, evitando cálculos desnecessários e melhorando o desempenho da aplicação.

Beleza, mas quando você deve usar useMemo? 🤔

Maravilha agora, você pode estar pensando: "Isso é incrível! Vou usar useMemo em todos os lugares!" Mas calma lá pequeno gafanhoto! Com grandes poderes vem grandes responsabilidades

O useMemo é ótimo para otimizar o desempenho, mas nem sempre é necessário. Você deve usá-lo apenas quando estiver lidando com cálculos pesados ou quando quiser evitar renderizações desnecessárias causadas por novas referências de objetos.

Por mais que o useMemo possa ser muito útil, é importante não usá-lo em excesso. Adicioná-lo em todos os lugares pode realmente prejudicar o desempenho de sua aplicação, porque a memorização tem seu próprio custo. Portanto, use-o apenas quando tiver certezade que fará uma diferença notável ok?

Conclusão

Enfim pessoas! O useMemo é um hook bacana que pode te ajudar a otimizar seus componentes React armazenando em cache os resultados de cálculos pesados. Essa é a mágica do useMemo! É uma ferramenta simples, porém poderosa, para otimizar seus componentes React, só lembre-se de usá-lo com sabedoria e apenas quando realmente necessário, pois o uso desnecessário do useMemo pode prejudicar o desempenho do seu aplicativo.