⚛Os 10 React Hooks Mais Úteis: 07 - useMemo⚛
Tags: react, javascript, webdev, beginners
Published: 2023-01-05 15:45:02

_Este é o sétimo artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação._

O React hook `useMemo` é útil para otimizar o desempenho de um componente armazenando o resultado de funções intensivas em recursos de maneira a evitar o recálculo desnecessário em atualizações futuras do componente.

Por exemplo, se você tiver uma função que percorre toda uma grande lista de itens e filtra essa lista com base em alguns critérios, essa função pode ser considerada um cálculo intensivo, pois ela pode levar um tempo considerável para ser executada, dependendo do tamanho da lista.

O `useMemo` permite que você armazene o resultado de uma expressão e evite que ela seja recalculada se os valores nessa expressão não mudarem.

A sintaxe do `useMemo` é a seguinte:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztk32b3knwqfq6ysm4if.png)
Nessa estrutura, `valorMemorizado` é o valor retornado pelo `useMemo`, que é o resultado da expressão passada como primeiro argumento (`expressãoACalcular`). 

O segundo argumento é um array de dependências (`[dependência1, dependência2]`) que indica quais valores são utilizados pela expressão para ser calculada. Se algum desses valores mudar, o `useMemo` chamará a expressão novamente e armazenará o novo resultado. Se nenhum desses valores mudar, o `useMemo` retornará o valor armazenado anteriormente, evitando assim o cálculo desnecessário.
<br>
# Quando deve-se utilizá-lo?

Antes de tudo, é importante lembrar que o código não deve depender de `useMemo`. Em outras palavras, você deve ser capaz de substituir chamadas a `useMemo` por chamadas de função diretas e não alterar o comportamento da aplicação, exceto o desempenho. A forma mais fácil de fazer isso é escrever o código sem `useMemo` primeiro e adicioná-lo conforme necessário.
<br>
# UseMemo() na Prática

No nosso primeiro exemplo, usamos o hook `useMemo()` para otimizar o desempenho da aplicação (to do list):
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/useMemo-Filter-List#src/App.jsx %}

Aqui, o `useMemo` permite que você faça uma memorização de um valor computado e apenas recalcule esse valor se alguma das suas dependências mudar.

No código específico desse to do list, o `useMemo` está sendo usado para criar uma lista filtrada de tarefas (`filteredTasks`) a partir da lista de tarefas (`tasks`). A lista filtrada é criada usando um filtro (`showCompleted`) que determina se as tarefas concluídas devem ser incluídas na lista ou não.

O `useMemo` é chamado com uma função de callback e um array de dependências. A função de callback é executada somente se alguma das dependências mudar. Nesse caso, as dependências são `showCompleted` e `tasks`. Isso significa que a lista filtrada só será recalculada se o filtro ou a lista de tarefas mudar, o que pode otimizar o desempenho da aplicação, especialmente em casos em que a criação da lista filtrada é um processo custoso em termos de tempo ou recursos. Isso é especialmente importante em aplicações que precisam lidar com grandes quantidades de dados ou que são usadas em dispositivos com menor poder de processamento.
<br>
## Hook useMemo em consulta de API

Outro exemplo comum de uso do `useMemo` é em conjunto com o `useEffect` para evitar que uma função seja recriada a cada renderização. Digamos que você tenha um componente que faz uma chamada ajax para buscar dados de uma API e exibe os dados em uma tabela. Você pode usar o `useMemo` para armazenar a função de busca em cache e evitar que ela seja recriada toda vez que o componente é renderizado. Acompanhe: 
_`(Acompanhe em "Show files>src>App.jsx")`_

{% embed https://replit.com/@MarceloPetry/Movies-Data-Table-with-useMemo#src/App.jsx %}

O código acima representa um componente do React que permite ao usuário pesquisar por filmes e exibir os resultados da pesquisa em uma tabela.

Neste exemplo, o hook `useMemo` é utilizado para otimizar a performance da aplicação.

1 - Primeiro, o código importa o arquivo `App.css` e os Hooks `useState`, `useMemo` e `useEffect` do React;

2 - Em seguida, o código define a função `App`, que é um componente do React;

3 - Dentro da função `App`, o código usa o `useState` três vezes para inicializar três estados: `searchTerm`, `movies` e `trendingMovies`;

4 - O código então define a função `fetchMovies` para buscar filmes da API do The Movie Database (TMDb) usando o termo de pesquisa atual. A função `fetchTrendingMovies` é definida de maneira semelhante, mas busca os filmes mais populares da semana;

5 - O código usa o `useEffect` para garantir que a função `fetchMovies` ou `fetchTrendingMovies` seja chamada quando o termo de pesquisa ou o componente for atualizado. Se o termo de pesquisa estiver vazio, a função `fetchTrendingMovies` é chamada, caso contrário, a função `fetchMovies` é chamada;

6 - O código usa o `useMemo` para filtrar o array de filmes baseado no termo de pesquisa atual. Isso é feito para evitar que o array seja filtrado toda vez que o componente é renderizado. A função `fetchData` é criada apenas uma vez e armazenada na memória pelo `useMemo`. Isso significa que, ao invés de criar uma nova função toda vez que o componente é renderizado, a mesma função é reutilizada, o que pode melhorar significativamente o desempenho da aplicação em casos em que a função é chamada com frequência;

7 - Por fim, o código retorna um elemento JSX que renderiza uma tabela de filmes. Se o termo de pesquisa estiver vazio, a tabela exibe os filmes mais populares da semana. Caso contrário, a tabela exibe os filmes filtrados pelo termo de pesquisa.
<br>
## UseMemo em formulário de Login

O React hook `useMemo` pode ser útil em um componente de formulário de login, no qual seja preciso melhoras de performance. Veja o exemplo:
_`(Acompanhe em "Show files>src>App.jsx")`_

{% embed https://replit.com/@MarceloPetry/Login-Form-with-useMemo#src/App.jsx %}

O código acima é um formulário de login que permite que o usuário insira um nome de usuário e senha e, em seguida, envie os dados para a função `onSubmit`.

O formulário usa os hooks `useState` do React para gerenciar o estado dos campos de entrada de nome de usuário e senha e de uma mensagem de erro que pode ser exibida.

O hook `useMemo` é usado para criar uma memória cache da variável `isFormValid`. Essa variável é um booleano que indica se os campos de nome de usuário e senha estão preenchidos.

A função de callback passada para o `useMemo` retorna `true` se o tamanho de `username` for maior que zero e o tamanho de `password` for maior que zero. Caso contrário, ela retorna `false`. O `useMemo` aceita um segundo argumento, que é uma lista de dependências.

Isso significa que a função de callback só será chamada novamente se algum dos valores dessa lista mudar. No caso do código acima, a função de callback só será chamada novamente se o valor de `username` ou `password` mudar.

Isso é útil porque a função de callback pode ser intensiva em termos de processamento e não precisamos recalculá-la toda vez que o componente é renderizado. Ao invés disso, podemos usar a memória cache fornecida pelo `useMemo` para evitar recálculos desnecessários e melhorar a performance do componente.

A função `handleSubmit` é chamada quando o formulário é enviado e impede o envio padrão do formulário. Se o formulário for válido (ou seja, se os campos de nome de usuário e senha estiverem preenchidos), a função `onSubmit` é chamada com os valores de `username` e `password`. Caso contrário, uma mensagem de erro é exibida.

O código também renderiza dois botões: um para enviar o formulário e outro para entrar com o Google. O primeiro botão é desabilitado se o formulário não for válido. O segundo botão inclui um ícone de login do Google.

---

# Conclusão

O hook `useMemo` do React permite que você crie uma memória cache de valores computados em um componente. Isso pode ser útil para evitar recalculos desnecessários e melhorar a performance do seu projeto React.

O `useMemo` é recomendado para uso em casos em que a computação de um valor pode ser intensiva em termos de processamento e não precisa ser recalculada toda vez que o componente é renderizado. Em vez disso, o valor pode ser armazenado em cache e somente recalculado quando alguma de suas dependências mudar.

No geral, o uso do `useMemo` pode ajudar a otimizar a performance de uma aplicação React, especialmente em componentes que são renderizados frequentemente ou que realizam cálculos complexos. 

No entanto, é importante lembrar de usá-lo com moderação, pois criar muitas memórias cache pode resultar em um aumento no uso de memória e pode comprometer a performance em vez de melhorá-la.

---

[marcelopetry.com](https://marcelopetry.com)