Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Коли варто використовувати useMemo()». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що повертає `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()` (він кешує саму функцію, а не значення) |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати399 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.