> Что такое мемоизация (React)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: ITFB, Домклик, EPAM, Арго

Стек: React

> Пример ответа

Мемоизация - это техника оптимизации, при которой результаты выполнения функции кэшируются на основе её аргументов. Если функция вызывается повторно с теми же входными данными, возвращается сохранённое значение, а не выполняется повторное вычисление. В контексте React это особенно полезно для предотвращения лишних рендеров и дорогих операций.

Пример использования в React хук useMemo:

JSX
import { useMemo } from 'react';

function ExpensiveComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return <ul>{filteredItems.map(item => <li key={item}>{item}</li>)}</ul>;
}

Здесь useMemo запоминает результат фильтрации и пересчитывает его только при изменении items или filter. Аналогично, React.memo мемоизирует целый компонент, предотвращая его перерисовку, если пропсы не изменились. Важно помнить: мемоизация имеет смысл только для тяжёлых вычислений или частых ререндеров, иначе накладные расходы на кэширование могут перевесить выгоду.