useMemo - Memoriza valores calculados para evitar recomputações desnecessárias, melhorando a performance

[Romeusorionaet]

O hook useMemo do React é usado para memorizar valores calculados, evitando recomputações desnecessárias em componentes funcionais. Isso pode melhorar a performance ao impedir que cálculos caros sejam repetidos em cada renderização, a menos que suas dependências mudem.

Quando usar useMemo

Você deve considerar usar useMemo quando:

1. Cálculos caros: Você tem um cálculo que é intensivo em termos de processamento e que não precisa ser recalculado em todas as renderizações.
2. Objetos e arrays referenciados: Você precisa passar objetos ou arrays para componentes filhos que dependem de referências estáveis para otimizações como React.memo.

Exemplo Prático

Vamos criar um exemplo onde useMemo é usado para memorizar o resultado de um cálculo pesado. Suponha que temos uma função que realiza um cálculo complexo e queremos garantir que esse cálculo seja feito apenas quando necessário.

import { useState, useMemo } from 'react';

// Função simulando um cálculo pesado
const computeExpensiveValue = (num) => {
  console.log('Calculando valor...');
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += num;
  }
  return result;
};

export function App() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('');

  // Memoriza o valor calculado, só recalculando quando 'count' mudar
  const expensiveValue = useMemo(() => computeExpensiveValue(count), [count]);

  return (
    <div>
      <h1>useMemo Example</h1>
      <div>
        <button onClick={() => setCount(count + 1)}>Incrementar Contador</button>
        <p>Contador: {count}</p>
        <p>Valor Calculado: {expensiveValue}</p>
      </div>
      <div>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <p>Valor do Input: {inputValue}</p>
      </div>
    </div>
  );
}

Explicação do Exemplo

1. Estado Inicial:

   • count e inputValue são os estados iniciais gerenciados pelo useState.

2. Função de Cálculo Pesado:

   • computeExpensiveValue é uma função que simula um cálculo pesado.

3. Uso do useMemo:

   • useMemo memoriza o resultado da função computeExpensiveValue baseada na dependência count.
   • expensiveValue só é recalculado quando count muda.

4. Renderização do Componente:

   • O componente renderiza um botão para incrementar o contador, exibe o valor do contador e o resultado do cálculo pesado.
   • Também inclui um input de texto cujo valor é armazenado em inputValue.

Benefícios do useMemo

• Performance:

  • Evita recalcular valores pesados em cada renderização.
  • Melhora a performance ao memorizar resultados de cálculos complexos.

• Dependências Controladas:

  • Só recalcula o valor quando as dependências especificadas mudam.

Considerações

• Uso Apropriado:

  • useMemo deve ser usado quando há cálculos caros ou pesados.
  • Não é necessário para otimizações prematuras ou cálculos triviais.

• Efeito na Legibilidade:

  • Pode adicionar complexidade ao código, por isso deve ser usado quando os benefícios de performance são claros.

Este exemplo demonstra como useMemo pode ser usado para otimizar a performance de um componente React, garantindo que cálculos pesados sejam realizados apenas quando necessário, evitando recomputações desnecessárias.