useMemo Хук

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

Синтаксис:

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

При зміні будь-яких залежностей, вказаних у масиві dependencies, запам'ятовуване значення буде переобчислено. Однак, якщо залежності залишаються незмінними між рендерами, React поверне попередньо обчислене значення без переобчислення.

Примітка

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

Приклад 1

Створимо компонент ShoppingCart, який буде зберігати інформацію про кількість обраних користувачем товарів. Крім того, він буде обробляти логіку підрахунку загальної суми із зазначенням суми, яку користувач повинен заплатити. Наша основна мета - запам'ятати загальну суму і перерахувати її тільки тоді, коли користувач змінить проп products, переданий цьому компоненту.

Розрахунок totalPrice виконується всередині хука useMemo, що запобігає зайвому перерахунку при кожному повторному рендері компонента.

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

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

Повний код програми:

Примітка

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