Série React Hooks: useMemo
Tags: react, javascript, typescript, usememo
Published: 2023-06-06 12:24:00


![Hook Reactjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cq82utxhjrbbgsobc6o.png)

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](https://dev.to/taisesoares/serie-react-hooks-useimperativehandle-44d)
- [Série React Hooks: useDeferredValue](https://dev.to/taisesoares/serie-react-hooks-usedeferredvalue-13d)
- [Série React Hooks: useCallback](https://dev.to/taisesoares/serie-react-hooks-usecallback-49ap)
- [Série React Hooks: useSyncExternalStore](https://dev.to/taisesoares/serie-react-hooks-usesyncexternalstore-2lpk)
- [Série React Hooks: useRef](https://dev.to/taisesoares/serie-react-hooks-useref-2mjl)

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

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

![Memorização useMemo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjxxokvs11qy3k9tg0da.png)

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:

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

![reactjs useMemo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odkmla1z2g5i7tntiz0e.png)


Confuso ainda? Bora para um exemplo simples: 

```tsx
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: 

```tsx
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92krc57p78plscmy0m1w.png)

## 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.