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

ReactJunior~1 хв читання

Що повертає `useMemo()`

javascript

const memoizedValue = useMemo(() => computeSomething(a, b), [a, b]);

useMemo() повертає результат виконання функції, яку ти передав. React запам'ятовує (кешує) цей результат і повторно повертає його, якщо залежності [a, b] не змінилися.

Простіше кажучи: useMemo повертає значення, яке не перераховується без потреби.

Приклад:

javascript

const doubled = useMemo(() => count * 2, [count]);

Якщо count не змінюється -> useMemo поверне старе значення doubled, а функція () => count * 2 не виконається знову.

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

useMemo - інструмент оптимізації продуктивності, тому застосовувати його потрібно свідомо і лише там, де це виправдано.

Використовуй `useMemo`, коли:

1. Є важкі обчислення

(сортування, фільтрація, довгі цикли, великі обчислення)

javascript

const sortedUsers = useMemo(() => {
  console.log("Сортування...");
  return [...users].sort((a, b) => a.name.localeCompare(b.name));
}, [users]);

Без useMemo сортування виконувалося б при кожному рендері, навіть якщо users не змінилися.

2. Хочеш уникнути зайвих ререндерів дочірніх компонентів

javascript

const filtered = useMemo(
  () => users.filter(u => u.active),
  [users]
);

return <UserList users={filtered} />;

Якщо UserList обгорнутий в React.memo, він не буде перерендерюватися, поки filtered не зміниться. Без useMemo створювався б новий масив при кожному рендері, і UserList думав би, що проп users змінився.

3. Потрібно мемоізувати похідні дані

javascript

const totalPrice = useMemo(
  () => cart.reduce((sum, item) => sum + item.price, 0),
  [cart]
);

Лише при зміні cart перераховується сума.

4. Використовуєш складні обчислення всередині `useEffect` або `useCallback`

Іноді useMemo допомагає стабілізувати залежності, щоб ефект не викликався без потреби.

Не варто використовувати `useMemo`, коли:

Випадок	Чому не потрібно
Обчислення легке (наприклад, `a + b`)	Оптимізація дорожча, ніж саме обчислення
Код заради "страховки" від ререндерів	React і так оптимізований
Хочеш "прискорити все підряд"	Передчасна оптимізація робить код заплутаним

Важливе правило

Використовуй useMemo, тільки якщо обчислення реально важке або якщо воно передається як проп у React.memo-компонент.

Підсумок

Питання	Відповідь
Що повертає `useMemo()`	Мемоізоване (кешоване) значення функції
Коли перераховується	Тільки якщо змінилися залежності
Коли використовувати	Для важких обчислень або щоб уникнути зайвих ререндерів
Коли не використовувати	Для легких виразів - лише ускладнить код
Альтернатива для функцій	`useCallback()` (він кешує саму функцію, а не значення)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.