Un esempio di Hook useMemo – Una somma molto pesante in Array

Introduzione al Hook useMemo evitare di ripetere operazioni molto onerose e salvare dati per il futuro

Immagina di dover calcolare la somma di tutti gli elementi di un array molto grande, ad esempio 1 milione di elementi. In un componente React, se questo calcolo viene eseguito ad ogni renderizzazione, potrebbe causare un notevole ritardo nell’aggiornamento dell’interfaccia utente. Ecco dove entra in gioco l’hook “useMemo”. Questo hook consente di memorizzare il risultato di un calcolo effettuato all’interno del componente, in modo che possa essere riutilizzato in caso di successive renderizzazioni senza doverlo ricalcolare.

Ecco un esempio di come utilizzare “useMemo” per calcolare la somma degli elementi di un array:

import React, { useMemo, useState } from 'react';

export default function ArraySum() {
  // definizione di un array di 1 milione di numeri casuali
  const [array, setArray] = useState(new Array(1000000).fill(0).map(() => Math.random()));

  // definizione di un memoized value "sum" che calcola la somma degli elementi dell'array
  const sum = useMemo(() => {
    console.log('Calcolo la somma degli elementi...');
    return array.reduce((acc, curr) => acc + curr, 0);
  }, [array]);

  // funzione chiamata al click del pulsante per ri-generare l'array
  function handleRegenerateArray() {
    setArray(new Array(1000000).fill(0).map(() => Math.random()));
  }

  return (
    <div>
      <p>Somma degli elementi dell'array: {sum}</p>
      <button onClick={handleRegenerateArray}>Genera nuovo array</button>
    </div>
  );
}

In questo esempio, abbiamo definito un componente React chiamato “ArraySum”. All’interno del componente, abbiamo utilizzato lo “useState” hook per definire lo stato locale “array”, che contiene un array di 1 milione di numeri casuali.

Successivamente, abbiamo utilizzato l’hook “useMemo” per definire una memoized value “sum”, che calcola la somma degli elementi dell’array utilizzando il metodo “reduce”. Questa memoized value viene calcolata solo quando l’array viene modificato, poiché abbiamo specificato “array” come dipendenza all’interno della funzione “useMemo”. In questo modo, evitiamo di ricalcolare la somma ad ogni renderizzazione del componente.

Infine, abbiamo definito una funzione “handleRegenerateArray” che viene chiamata al click del pulsante “Genera nuovo array”. Questa funzione genera un nuovo array di 1 milione di numeri casuali, aggiornando lo stato “array” utilizzando la funzione “setArray”.

In questo modo, utilizzando l’hook “useMemo”, siamo riusciti ad ottimizzare le prestazioni del componente React, evitando di ricalcolare la somma degli elementi dell’array ad ogni renderizzazione e migliorando l’esperienza dell’utente.