L'hook useMemo consente di memorizzare il risultato di una funzione, ottimizzando calcoli costosi tramite la memorizzazione nella cache del risultato. È vantaggioso quando si eseguono calcoli frequenti e ad alta intensità di risorse che producono lo stesso risultato se i dati non cambiano. Questo elimina la necessità di ricalcoli ridondanti, migliorando così le prestazioni.

Sintassi:

Si dichiara una nuova variabile, ad esempio cachedValue, e la si assegna all'hook useMemo. All'interno delle parentesi dell'hook, si fornisce una funzione (ad esempio calculateValue), che verrà eseguita per calcolare il valore memorizzato. Questa funzione può essere qualsiasi funzione JavaScript valida. Inoltre, si include un secondo argomento—un array chiamato dependencies—che contiene i valori da cui dipende il valore memorizzato.

const cachedValue = useMemo(calculateValue, dependencies)

Quando uno qualsiasi dei valori specificati nell'array dependencies cambia, il valore memorizzato verrà ricalcolato. Tuttavia, se le dipendenze rimangono invariate tra i render, React restituirà il valore precedentemente calcolato senza ricalcolarlo.

Nota

Questa ottimizzazione contribuisce a migliorare le prestazioni evitando calcoli non necessari e garantendo un'esperienza utente più efficiente.

Esempio 1

Creiamo il componente ShoppingCart, che memorizzerà le informazioni sul numero di prodotti selezionati dall'utente. Inoltre, gestirà la logica per il calcolo della somma totale, indicando l'importo che l'utente deve pagare. L'obiettivo principale è memorizzare la somma totale e ricalcolarla solo quando l'utente modifica la prop products passata a questo componente.

import React, { useMemo } from "react";

const ShoppingCart = ({ products }) => {
  const totalPrice = useMemo(() => {
    let sum = 0;
    for (const item of products) {
      sum += item.price * item.quantity;
    }
    return sum;
  }, [products]);

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {products.map(({ id, name, price, quantity }) => (
          <li key={id}>
            <p>
              <span>{name} -</span>
              <span>
                ${price} x {quantity}
              </span>
            </p>
          </li>
        ))}
      </ul>
      <h3>
        Total Price: <span>${totalPrice}</span>
      </h3>
    </div>
  );
};

Il calcolo di totalPrice viene eseguito all'interno dell'hook useMemo, che evita ricalcoli non necessari a ogni nuovo rendering del componente.

Spiegazione riga per riga:

• Riga 1: Importazione dell'hook useMemo dalla libreria React per sfruttarne la funzionalità;
• Riga 3: Il componente ShoppingCart viene definito utilizzando la sintassi convenzionale della funzione;
• Riga 4-10: Creazione della variabile totalPrice responsabile del prezzo totale che l'utente deve pagare. L'hook useMemo viene utilizzato per evitare calcoli a ogni render;
  • Riga 5-9: All'interno della funzione freccia passata a useMemo, viene implementata la logica per il calcolo del sum totale. Ogni elemento dell'array products viene iterato, il prezzo viene moltiplicato per quantity e aggiunto alla variabile sum;
  • Riga 10: L'array di dipendenze [products] viene fornito all'hook useMemo. Questo indica che il valore memorizzato deve essere ricalcolato se l'array products cambia.
• Riga 12-31: Viene renderizzato il markup del componente.

1. Riga 16: Il metodo map viene utilizzato per renderizzare ogni prodotto nell'array products, creando un elemento JSX corrispondente;
2. Riga 17: L'attributo key viene impostato per garantire un rendering efficiente degli elementi dell'array e aiutare React a identificare ogni elemento in modo univoco;
3. Riga 28: Il valore della variabile totalPrice viene visualizzato all'interno del JSX, mostrando il prezzo totale calcolato.

Codice completo dell'app:

Nota

Si consiglia di non mescolare gli hook useEffect e useMemo per garantire chiarezza ed evitare confusione. La distinzione principale risiede nei rispettivi scopi: useEffect viene utilizzato per gestire gli effetti collaterali e il ciclo di vita del componente, mentre useMemo memorizza in cache calcoli costosi per migliorare le prestazioni.