useMemo-hookin avulla voidaan muistaa funktion tulos, mikä optimoi raskaat laskutoimitukset tallentamalla tuloksen välimuistiin. Tämä on hyödyllistä, kun suoritetaan usein toistuvia ja paljon resursseja vaativia laskelmia, jotka tuottavat saman tuloksen, jos data ei muutu. Näin vältetään tarpeettomat uudelleenlaskennat ja parannetaan suorituskykyä.

Syntaksi:

Määritellään uusi muuttuja, kuten cachedValue, ja asetetaan sille arvoksi useMemo-hook. Koukussa annetaan sulkujen sisällä funktio (esim. calculateValue), joka suoritetaan muistiin tallennetun arvon laskemiseksi. Tämä funktio voi olla mikä tahansa kelvollinen JavaScript-funktio. Lisäksi annetaan toinen argumentti—taulukko nimeltä dependencies—joka sisältää arvot, joista muistiin tallennettu arvo riippuu.

const cachedValue = useMemo(calculateValue, dependencies)

Kun jokin dependencies-taulukossa määritellyistä riippuvuuksista muuttuu, muistiin tallennettu arvo lasketaan uudelleen. Jos riippuvuudet pysyvät samoina renderöintien välillä, React palauttaa aiemmin lasketun arvon ilman uudelleenlaskentaa.

Huomio

Tämä optimointi parantaa suorituskykyä välttämällä tarpeettomat laskutoimitukset ja johtaa tehokkaampaan käyttökokemukseen.

Esimerkki 1

Luodaan ShoppingCart-komponentti, joka tallentaa tiedot käyttäjän valitsemien tuotteiden määrästä. Lisäksi komponentti huolehtii kokonaissumman laskemisesta, eli siitä summasta, jonka käyttäjän tulee maksaa. Tavoitteena on käyttää muistissa pidettävää (memoized) kokonaissummaa ja laskea se uudelleen vain silloin, kun tälle komponentille välitetty products-prop muuttuu.

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>
  );
};

totalPrice-arvon laskenta suoritetaan useMemo-hookin sisällä, mikä estää tarpeettomat uudelleenlaskennat komponentin jokaisella uudelleenrenderöinnillä.

Rivikohtainen selitys:

• Rivi 1: Tuodaan useMemo-hook React-kirjastosta sen toiminnallisuuden hyödyntämiseksi;
• Rivi 3: ShoppingCart-komponentti määritellään tavanomaisella funktiosyntaksilla;
• Rivit 4-10: Luodaan totalPrice-muuttuja, joka vastaa käyttäjän maksettavasta kokonaissummasta. useMemo-hookia käytetään, jotta laskentaa ei suoriteta jokaisella renderöinnillä;
  • Rivit 5-9: Nuolifunktiossa, joka välitetään useMemo:lle, toteutetaan logiikka kokonaissumman (sum) laskemiseksi. Jokainen products-taulukon alkio käydään läpi, ja hinta kerrotaan quantity-arvolla ja lisätään sum-muuttujaan;
  • Rivi 10: Riippuvuuslista [products] annetaan useMemo-hookille. Tämä tarkoittaa, että muistissa pidettävä arvo lasketaan uudelleen vain, jos products-taulukko muuttuu.
• Rivit 12-31: Komponentin merkkaus renderöidään.
  1. Rivi 16: map-metodia käytetään jokaisen tuotteen renderöintiin products-taulukosta, jolloin jokaiselle tuotteelle luodaan oma JSX-elementti;
  2. Rivi 17: key-attribuutti asetetaan, jotta taulukon alkiot renderöidään tehokkaasti ja React tunnistaa jokaisen alkion yksilöllisesti;
  3. Rivi 28: totalPrice-muuttujan arvo renderöidään JSX:ään, jolloin laskettu kokonaishinta näytetään.

Koko sovelluksen koodi:

Huomio

On suositeltavaa olla sekoittamatta useEffect- ja useMemo-hookeja selkeyden ja väärinkäsitysten välttämiseksi. Keskeinen ero on niiden käyttötarkoituksessa: useEffect on tarkoitettu sivuvaikutusten ja komponentin elinkaaren hallintaan, kun taas useMemo muistaa raskaat laskutoimitukset suorituskyvyn parantamiseksi.