Хук useMemo дозволяє мемоізувати результат функції, оптимізуючи витратні обчислення шляхом кешування результату. Це корисно, коли маємо часті та ресурсомісткі обчислення, які дають однаковий результат, якщо дані не змінюються. Це усуває необхідність у повторних обчисленнях, що призводить до підвищення продуктивності.

Синтаксис:

Оголошується нова змінна, наприклад cachedValue, якій присвоюється значення хука useMemo. У дужках хука передається функція (наприклад, calculateValue), яка буде виконана для обчислення мемоізованого значення. Ця функція може бути будь-якою коректною JavaScript-функцією. Додатково передається другий аргумент — масив dependencies, що містить значення, від яких залежить мемоізоване значення.

const cachedValue = useMemo(calculateValue, dependencies)

Коли будь-яка залежність, вказана у масиві dependencies, змінюється, мемоізоване значення буде переобчислено. Якщо ж залежності залишаються незмінними між рендерами, React поверне раніше обчислене значення без повторного обчислення.

Note

Така оптимізація допомагає підвищити продуктивність, уникаючи зайвих обчислень, і забезпечує більш ефективний користувацький досвід.

Приклад 1

Створимо компонент ShoppingCart, який зберігатиме інформацію про кількість товарів, обраних користувачем. Додатково він оброблятиме логіку обчислення загальної суми, що вказує на суму, яку користувач має сплатити. Основна мета — мемоізувати загальну суму та виконувати її повторний розрахунок лише тоді, коли користувач змінює проп products, переданий цьому компоненту.

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 виконується всередині хука useMemo, що запобігає непотрібним повторним обчисленням під час кожного повторного рендеру компонента.

Пояснення по рядках:

• Рядок 1: Імпортується хук useMemo з бібліотеки React для використання його функціоналу;
• Рядок 3: Компонент ShoppingCart визначається за допомогою стандартного синтаксису функції;
• Рядки 4-10: Створюється змінна totalPrice, що відповідає за загальну суму, яку має сплатити користувач. Хук useMemo застосовується, щоб уникнути повторних обчислень при кожному рендері;
  • Рядки 5-9: У переданій в useMemo стрілочній функції реалізовано логіку розрахунку загальної суми sum. Кожен елемент масиву products перебирається, ціна множиться на значення властивості quantity і додається до змінної sum;
  • Рядок 10: У хук useMemo передається масив залежностей [products], що вказує на необхідність перерахунку лише при зміні масиву products.
• Рядки 12-31: Відображається розмітка компонента.
  1. Рядок 16: Метод map використовується для візуалізації кожного елемента масиву products, створюючи відповідний JSX-елемент;

2. Рядок 17: Атрибут key задається для оптимізації рендерингу та унікальної ідентифікації кожного елемента;
3. Рядок 28: Значення змінної totalPrice відображається у JSX, показуючи обчислену загальну суму.

Повний код застосунку:

Примітка

Рекомендується не поєднувати хуки useEffect та useMemo для забезпечення зрозумілості та уникнення плутанини. Основна відмінність полягає у їхніх призначеннях: useEffect використовується для керування побічними ефектами та життєвим циклом компонента, тоді як useMemo мемоізує ресурсоємні обчислення для підвищення продуктивності.