Після п’яти років роботи з React я нарешті зрозумів справжню суть useMemo (підказка: це не про кешування)

Фото Randy Laybourne на Unsplash

Коли я вперше зіткнувся з useMemo у React, я подумав, що це лише про кешування. Як і багато інших розробників, я припускав, що його основна мета — це оптимізація продуктивності шляхом уникнення зайвих повторних обчислень у компоненті React. Але після п’яти років роботи з React я зрозумів, що справжня сила цього хука зовсім в іншому — у забезпеченні стабільності та передбачуваної поведінки.

Чому useMemo — це не лише про кешування

Поширена помилка полягає в тому, що useMemo — це чарівна паличка для підвищення продуктивності за рахунок мемоізації значень. Хоча це технічно вірно, справжня перевага useMemo полягає в уникненні повторного створення посилань, що можуть викликати приховані помилки, особливо в хуках (Hooks) чи пропсах (Props), які залежать від стабільних даних.

Давайте обговоримо мій випадок.

Момент прозріння: як правильно використовувати useMemo

Я працював над створенням кастомного хука (Custom Hook) для динамічних обчислень.
Спочатку я передавав об'єкт у хук (Hook), який вимагав об'єднання деяких існуючих полів і значень. Для простоти я створював цей об'єкт безпосередньо в коді:

const existingFields = {  
 ...bookingFields,  
 ...values,  
};  
const { calculations } = useCalculations(existingFields);

На перший погляд, це виглядає безпечним. Але я швидко помітив, що мій компонент почав нескінченно перевідмальовуватись, і результати обчислень ставали нестабільними. Чому? Тому що об'єкт existingFields створювався наново під час кожного рендера, навіть якщо його вміст залишався незмінним. Оскільки React порівнює об'єкти за посиланням, хук вважав, що дані змінювалися щоразу.

На сцені з’являється useMemo

Ось тут і допоміг useMemo.
Обгортання об'єкта existingFields у useMemo гарантувало, що він буде перераховуватися лише тоді, коли змінюватимуться його залежності:

const existingFields = useMemo(  
 () => ({  
 ...bookingFields,  
 ...values,  
 }),  
 [bookingFields, values]  
);

Ця проста зміна стабілізувала посилання, і мій кастомний хук (Custom Hook) нарешті почав працювати як слід. Жодних зайвих перевідмальовувань. 🎉

Коли використовувати useMemo

• Уникнення зайвих рендерів: Використовуйте його, коли передаєте об'єкти чи масиви, створені на основі інших даних, як залежності в хуки (Hooks) або пропси (Props).
• Стабілізація залежностей: Корисно, коли React порівнює залежності, наприклад, у useEffect або useCallback.
• Складні обчислення: Якщо значення вимагає значних ресурсів для обчислення, useMemo забезпечує, що його перерахунок відбувається лише за потреби.

Коли НЕ варто використовувати useMemo

Не використовуйте useMemo завчасно. Якщо ваше обчислення просте або не залежить від інших пропсів (Props) чи станів (States), краще обійтися без нього.
Надмірне використання useMemo може ускладнити читання коду без значних переваг.

Основний висновок

useMemo — це потужний інструмент, але його справжня мета не лише в кешуванні. Це стабілізація посилань для уникнення прихованих помилок у React, особливо у хуках (Hooks) та компонентах. Зосередившись на цьому аспекті, ви не лише писатимете більш передбачуваний код, а й покращите продуктивність свого додатку там, де це дійсно має значення.

Тож наступного разу, коли ви використовуєте useMemo, запитайте себе: я стабілізую значення, щоб уникнути зайвих обчислень, чи просто намагаюся оптимізувати передчасно?

З найкращими побажаннями 🚀

Дякуємо, що ви є частиною спільноти Classy Endeavors! Перед тим як піти:

• Обов'язково плесніть в долоні та підпишіться на автора 👏️️
• Слідкуйте за нами: LinkedIn| Medium
• Контакти: Classy Endeavors

Перекладено з: After 5 Years with React, I Finally Understood useMemo (Hint: It's Not About Caching)