Skip to main content
Практика завдань

Як працює useMemo і навіщо він потрібен

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

Це особливо корисно, якщо обчислення є ресурсомістким або залежить від змінних, які рідко змінюються.

Чому useMemo?

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

Важливо:

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

Синтаксис

jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • computeExpensiveValue — функція, що повертає результат.
  • [a, b] — залежності. Якщо вони не змінилися — React поверне кешоване значення.

Приклад: без useMemo

jsx
const App = ({ items }) => { const filtered = items.filter(item => item.active); // кожен рендер — новий фільтр return <List data={filtered} />; };

Кожного разу при повторному рендерингу filter буде викликано, навіть якщо items не змінилися.

Приклад: з useMemo

jsx
const filtered = useMemo(() => { return items.filter(item => item.active); }, [items]);

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

useMemo vs useCallback

****useCallbackuseMemo
Що повертаєПовертає функціюПовертає значення
Приклад() =>heavyComputation()
ЗастосуванняВикористовується для обробниківВикористовується для значень

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

Добре використовувати:

  • Для ресурсомістких обчислень (наприклад, sort, filter, map, reduce)
  • Коли передаєте обчислені значення до компонентів React.memo
  • Коли value використовується як залежність у useEffect або useCallback

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

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

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

Дочитали статтю?
Практика завдань
Назад
Далі