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:

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.

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.

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")

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.

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")

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.

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")

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