8.6-useMemo.md

React Hooks

useMemo

O useMemo é um Hook que permite memorizar o valor de uma expressão. Isso pode ajudar a melhorar o desempenho de uma aplicação, pois evita que a expressão seja recalculada sempre que houver uma atualização no componente.

Exemplo:

import { useMemo } from 'react';

function List({ data }) {
  // Use useMemo para memorizar o resultado de filterData
  const filteredData = useMemo(() => filterData(data), [data]);

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

function filterData(data) {
  // Cálculo complexo que filtra os dados baseado em algum critério
  return data.filter(item => item.isActive);
}

Neste exemplo, o componente List exibe uma lista de itens filtrados a partir de um conjunto de dados brutos. Usamos useMemo para memorizar o resultado da função filterData para evitar que ela seja chamada sempre que os dados brutos mudarem. Isso garante que o cálculo complexo só seja executado quando realmente necessário, melhorando assim o desempenho da aplicação.

Aqui, data é a propriedade que é passada para o componente List, quando data muda a função filterData é executada novamente, e quando não muda a função não é executada novamente e o valor já memorizado é utilizado.

Ir para a próxima seção