Когда лучше не использовать мемоизацию?

Когда НЕ использовать мемоизацию

Мемоизация — это оптимизация производительности, но её неправильное применение может привести к противоположному результату. Давайте разберём, когда её лучше избегать.

1. Когда вычисления дешевые

Самый частый случай — нет смысла кэшировать быстрые операции. Затраты на проверку кэша и сравнение зависимостей могут превысить саму операцию.

// Плохо — избыточная мемоизация
const result = useMemo(() => {
  return a + b; // очень быстро
}, [a, b]);

// Хорошо — просто вычисли
const result = a + b;

2. Когда зависимости часто меняются

Если массив зависимостей содержит значения, которые создаются заново на каждом рендере, мемоизация не сработает. Компонент всё равно пересчитает значение.

// Плохо — зависимость создаётся заново
const items = useMemo(() => {
  return expensiveComputation(data);
}, [JSON.stringify(data)]); // JSON.stringify разный каждый раз!

// Лучше — нормализуй зависимость
const items = useMemo(() => {
  return expensiveComputation(data);
}, [data.id]); // конкретное значение

3. С примитивными значениями и колбэками

Мемоизация примитивов (строк, чисел, булевых) не имеет смысла, потому что они и так быстро создаются и сравниваются.

// Плохо — ненужная мемоизация
const title = useMemo(() => "Hello", []);
const count = useMemo(() => 42, []);

// Хорошо
const title = "Hello";
const count = 42;

4. В небольших компонентах

Если компонент простой и часто перерендерится, мемоизация может дорого обойтись. Переход на контекст или другую архитектуру эффективнее.

// Плохо — усложнение для маленького компонента
function SmallButton({ label }) {
  const handler = useCallback(() => alert(label), [label]);
  return <button onClick={handler}>{label}</button>;
}

// Хорошо — просто и понятно
function SmallButton({ label }) {
  return <button onClick={() => alert(label)}>{label}</button>;
}

5. С побочными эффектами

Мемоизация не заменяет правильную архитектуру. Если у тебя есть побочные эффекты, мемоизация их не решит — используй useEffect.

// Плохо — мемоизация не помогает
const apiCall = useMemo(() => {
  fetch(/api).then(r => setData(r));
  return null;
}, []);

// Хорошо
useEffect(() => {
  fetch(/api).then(r => setData(r));
}, []);

6. Когда профилирование не показало проблем

Это самое важное правило: мемоизируй только когда убедился в необходимости. React DevTools Profiler покажет, есть ли реальная проблема.

// Проверь сначала — нужна ли оптимизация?
// React DevTools > Profiler > покажет длительность рендера

Когда мемоизация ДЕЙСТВИТЕЛЬНО нужна

• Дорогие вычисления: фильтрация больших массивов, сложные算чёты
• Зависимости объектов/массивов: если передаёшь объект в props, оборачивай в useMemo
• Оптимизация массивов рендера: React.memo + useCallback для списков
• Предотвращение бесконечных циклов: стабильные ссылки на функции/объекты

Итог

Правило простое: мемоизируй проблемы, а не код. Сначала напиши чистый, простой код. Затем профилируй. Только если видишь проблему — оптимизируй. Иначе добавляешь сложность без выгоды.