useMemo

const cachedValue = useMemo(calculateValue, dependencies)

• Справочник
  • useMemo(calculateValue, dependencies)
• Использование
  • Пропуск ресурсоёмких вычислений
  • Пропуск ререндеров дочерних компонентов
  • Мемоизация зависимостей других хуков
  • Мемоизация функций
• Диагностика неполадок
  • Вычисления запускаются дважды при каждом ререндере
  • useMemo должен возвращать объект, а возвращает undefined
  • Вычисления в useMemo запускаются при каждом рендере
  • Нужно вызвать useMemo для каждого элемента в цикле, но это запрещено

Справочник

useMemo(calculateValue, dependencies)

Чтобы закешировать результат вычислений между ререндерами, достаточно вызвать useMemo на верхнем уровне внутри компонента:

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

Больше примеров ниже.

Параметры

• calculateValue: Функция, возвращающая значение, которое нужно закешировать. Она должна быть чистой и не должна принимать никаких аргументов. React обязательно вызовет её при первом рендере, а при последующих будет возвращать готовое значение. В том случае если какое-то значение из массива зависимостей dependencies изменилось, React заново вызовет calculateValue, получит новое значение и сохранит его для будущего переиспользования.

• dependencies: Массив всех реактивных значений, которые используются внутри функции calculateValue. Реактивные значения включают в себя пропсы, состояние и все переменные и функции, объявленные внутри компонента. Если вы настроили свой линтер для работы с React, он проверит, все ли реактивные компоненты были указаны как зависимости. Массив зависимостей должен иметь конечное число элементов и быть описан как [dep1, dep2, dep3]. React будет сравнивать каждую такую зависимость с её предыдущим значением при помощи Object.is.

Возвращаемое значение

При первом рендере useMemo возвращает результат вызова функции calculateValue.

При всех последующих рендерах useMemo либо будет возвращать значение, сохранённое при предыдущем рендере (если ничто в массиве зависимостей не изменилось), либо заново вызовет функцию calculateValue и вернёт возвращаемое ею значение.

Предостережения

• Поскольку useMemo это хук, то вызывать его можно только на верхнем уровне внутри вашего компонента или кастомного хука. Хуки нельзя вызывать внутри циклов или условий. Однако, если вам необходимо такое поведение, то можно извлечь новый компонент и переместить вызов хука в него.
• В строгом режиме React дважды вызовет передаваемую в useMemo функцию, чтобы проверить, является ли она чистой. Такое поведение существует только в режиме разработки и никак не проявляется в продакшене. Если эта функция чистая (какой она и должна быть), это никак не скажется на работе приложения. Результат одного из запусков будет просто проигнорирован.
• React не отбрасывает закешированное значение, если на то нет веских причин. Например, в режиме разработки React отбросит кеш, если файл компонента был изменён. В обоих режимах, разработки и продакшене, React отбросит кеш, если компонент «задержится» во время первоначального монтирования. Помимо того, в дальнейшем в React могут быть добавлены новые возможности, которые смогут отбрасывать кеш. Например, если в будущем в React появится встроенная поддержка виртуализированных списков, будет иметь смысл отбрасывать кеш для тех элементов, которые выходят за область видимости. Полагаться на useMemo стоит только как на средство для оптимизации производительности. В противном случае, использование состояния или рефа может быть более подходящим вариантом.

Использование

Пропуск ресурсоёмких вычислений

Чтобы закешировать вычисления между ререндерами, достаточно обернуть их в useMemo на верхнем уровне внутри компонента:

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

useMemo ожидает два аргумента:

1. Вычислительную функцию, не принимающую никаких аргументов и возвращающую некоторое значение.
2. Массив зависимостей, включающий в себя все значения, находящиеся внутри компонента и использующиеся при вычислении.

При первом рендере значение, получаемое из useMemo, будет результатом вызова вычислительной функции.

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

Иными словами, useMemo кеширует значение между ререндерами до тех пор, пока никакое значение из массива зависимостей не изменится.

Посмотрим на примере, когда это может быть полезно.

По умолчанию при ререндере React заново перезапускает всё тело компонента. Например, если TodoList обновит своё состояние или получит новый пропс, функция filterTodos перезапустится:

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

Обычно это не такая большая проблема, поскольку большинство вычислений довольно быстрые. Однако если приходится фильтровать или преобразовывать большой массив данных, или совершать какие-то иные ресурсоёмкие вычисления, то имеет смысл их пропускать (если входные данные никак не изменились). Оборачивание вычислительной функции в useMemo позволит переиспользовать вычисленные ранее visibleTodos (если ни todos, ни tab никак не изменились с предыдущего рендера).

Такой тип кеширования называют мемоизацией.

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab); // Вычисление будет пропущено, если todos и tab не изменились
}, [todos, tab]);
console.timeEnd('filter array');

Пропуск ререндеров дочерних компонентов

В некоторых случаях useMemo можно использовать для оптимизации ререндеров дочерних компонентов. Допустим, что TodoList передаёт как проп visibleTodos дочернему компоненту List:

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

В этом случае при изменении theme приложение будет на какое-то время подтормаживать. Однако если из разметки удалить <List />, то всё будет работать быстро.

По умолчанию при ререндере некоторого компонента React рекурсивно ререндерит и всех его потомков. По этой причине, когда TodoList ререндерится с другим значением theme, дочерний компонент List ререндерится вместе с ним. Это не страшно для компонентов, которые не производят никаких ресурсоёмких вычислений. Однако если ререндер заметно медленный (как с компонентом List), то имеет смысл обернуть его в memo. Это позволит избежать ререндеров, если пропсы с предыдущего рендера никак не изменились:

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

Теперь компонент List не будет ререндериться, если его пропсы с предыдущего рендера никак не изменились. Однако представим, что visibleTodos вычисляется без useMemo:

export default function TodoList({ todos, tab, theme }) {
  // При каждом изменении theme функция filterTodos создаёт новый массив...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... поэтому компонент List всегда будет получать новые пропсы и ререндериться каждый раз */}
      <List items={visibleTodos} />
    </div>
  );
}

В примере ниже функция filterTodos всегда создаёт новый массив, подобно тому как объектный литерал {} всегда создаёт новый объект. Это значит, что компонент List всегда будет получать новые пропсы, и оптимизация при помощи memo не работает. Здесь на помощь приходит useMemo:

export default function TodoList({ todos, tab, theme }) {
  // Просим React закешировать вычисления между ререндерами...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...и пока эти зависимости не изменяются...
  );
  return (
    <div className={theme}>
      {/* ...List будет получать одинаковые пропсы и пропускать ререндеры */}
      <List items={visibleTodos} />
    </div>
  );
}

В примере выше visibleTodos всегда будет иметь одно и то же значение, пока массив зависимостей остаётся неизменным. Следует помнить, что нет необходимости использовать useMemo без веской на то причины. Однако здесь это оправданно, поскольку visibleTodos передаётся как пропс в компонент, обёрнутый в memo, что позволяет пропускать лишние ререндеры. Существует ещё несколько причин, когда использование useMemo оправданно, – о них речь пойдёт ниже.

export default function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
  return (
    <div className={theme}>
      {children}
    </div>
  );
}

Мемоизация зависимостей других хуков

Предположим, что у нас есть вычисления, зависящие от объекта, создаваемого внутри компонента:

function Dropdown({ allItems, text }) {
  const searchOptions = { matchMode: 'whole-word', text };

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // 🚩 Обратите внимание: зависимость от объекта, создаваемого внутри компонента
  // ...

Подобная зависимость сводит на нет все преимущества мемоизации. При ререндере компонента весь его внутренний код перезапускается, включая создание объекта searchOptions. И поскольку этот объект является зависимостью useMemo, React каждый раз будет заново вычислять значение visibleItems.

Чтобы исправить такое поведение, можно мемоизировать сам объект searchOptions перед тем как передавать его в виде зависимости:

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ Вызывается только при изменении text

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ Вызывается только при изменении allItems или searchOptions
  // ...

В примере выше searchOptions будет изменяться только при изменении text. При этом можно сделать ещё лучше – переместить объект searchOptions внутрь вычислительной функции useMemo:

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]); // ✅ Вызывается только при изменении allItems или text
  // ...

Теперь вычисления зависят напрямую от значения text, которое является строчным и не может измениться «незаметно».

Мемоизация функций

Предположим, что компонент Form обёрнут в memo и получает как проп функцию:

export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }

  return <Form onSubmit={handleSubmit} />;
}

Подобно тому как объектный литерал {} создаёт новый объект, определение функции через function() {} или () => {} создаёт новую функцию при каждом ререндере. Само по себе создание функций не является проблемой (и этого, конечно, не стоит избегать). Однако поскольку компонент Form мемоизирован, стоит подумать о пропуске лишних ререндеров, если его пропсы остаются неизменными.

Чтобы мемоизировать функцию, можно вернуть её из вычислительной функции useMemo:

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

Поскольку мемоизация функций – довольно распространённая задача, в React есть встроенный хук специально для этих целей. Вместо useMemo можно обернуть функцию в useCallback и избежать написания дополнительной вложенной функции:

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

Два примера выше абсолютно идентичны. Единственное преимущество использования хука useCallback в том, что он позволяет избежать написания дополнительной вложенной функции. Ознакомиться подробнее с хуком useCallback можно здесь.

Диагностика неполадок

Вычисления запускаются дважды при каждом ререндере

В строгом режиме React запускает некоторые функции дважды:

function TodoList({ todos, tab }) {
  // Функция компонента будет запускаться дважды при каждом рендере

  const visibleTodos = useMemo(() => {
    // Эти вычисления также запустятся дважды, если любая из зависимостей изменится
    return filterTodos(todos, tab);
  }, [todos, tab]);

  // ...

Такое поведение ожидаемо, и не должно сломать ваш код.

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

Например, в коде ниже вычислительная функция мутирует массив, полученный из пропсов:

  const visibleTodos = useMemo(() => {
    // 🚩 Ошибка: мутация пропса
    todos.push({ id: 'last', text: 'Go for a walk!' });
    const filtered = filterTodos(todos, tab);
    return filtered;
  }, [todos, tab]);

Благодаря тому что React вызовет эту функцию дважды, разработчик заметит, что один и тот же todo был добавлен два раза. Изменять новые объекты, созданные внутри вычислений – нормально, но никакие существующие объекты изменяться не должны. Так, например, если функция filterTodos всегда возвращает новый массив, то мутировать его перед возвращением можно:

  const visibleTodos = useMemo(() => {
    const filtered = filterTodos(todos, tab);
    // ✅ Мутация объекта, созданного в процессе вычислений
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

Больше о сохранении компонентов чистым можно прочитать здесь.

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

useMemo должен возвращать объект, а возвращает undefined

Этот код не работает:

  // 🔴 Такой записью вернуть объект из стрелочной функции нельзя:
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

В языке JavaScript запись () => { открывает тело стрелочной функции и скобка { не является частью объекта. По этой причине функция не возвращает объект, что и приводит к ошибке. Это можно исправить, добавив круглые скобки: ({ и }):

  // Этот код работает, однако его легко заново сломать
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

Подобная запись может сбивать с толку, и этот код можно заново сломать, случайно удалив скобки.

Чтобы этого избежать, можно явно написать return:

  // ✅ Этот код работает и при этом он описан явно
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

Вычисления в useMemo запускаются при каждом рендере

Убедитесь, что в useMemo был передан массив зависимостей.

Если не указан массив зависимостей, то useMemo будет перезапускаться каждый раз:

function TodoList({ todos, tab }) {
  // 🔴 Нет массива зависимостей – перезапускается каждый раз
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

Исправленная версия с массивом зависимостей выглядит так:

function TodoList({ todos, tab }) {
  // ✅ Не перезапускается без надобности
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...

Если это не помогло, то проблема может быть в том, что какая-то зависимось получает новое значение при каждом рендере. Эту проблему можно отладить, выведя массив зависимостей в консоль:

  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  console.log([todos, tab]);

Затем в консоли можно нажать по массивам правой кнопкой мыши и для обоих выбрать опцию «Сохранить как глобальную переменную». Первый сохраним как temp1, а второй – как temp2. Здесь же можно проверить, все ли зависимости в массивах одинаковые:

Object.is(temp1[0], temp2[0]); // Одинаковы ли первые значения?
Object.is(temp1[1], temp2[1]); // Одинаковы ли вторые значения?
Object.is(temp1[2], temp2[2]); // ... и так для всех зависимостей ...

После того как необходимая зависимость была найдена, можно попробовать убрать её или попытаться мемоизировать.

Нужно вызвать useMemo для каждого элемента в цикле, но это запрещено

Предположим, что компонент Chart обёрнут в memo. Необходимо пропустить ререндеры для каждого из них, если родительский компонент ReportList ререндерится. Однако вызывать useMemo в циклах запрещено:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 Нельзя вызвать `useMemo` внутри цикла
        const data = useMemo(() => calculateReport(item), [item]);
        return (
          <figure key={item.id}>
            <Chart data={data} />
          </figure>
        );
      })}
    </article>
  );
}

Вместо этого можно извлечь новый компонент и мемоизировать данные внутри него:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item =>
        <Report key={item.id} item={item} />
      )}
    </article>
  );
}

function Report({ item }) {
  // ✅ Вызов useMemo на верхнем уровне компонента
  const data = useMemo(() => calculateReport(item), [item]);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
}

В качестве альтернативного варианта можно убрать useMemo, и вместо него обернуть сам Report в memo. В этом случае если проп item не изменится, то Report пропустит ререндер вместе со своим дочерним компонентом Chart:

function ReportList({ items }) {
  // ...
}

const Report = memo(function Report({ item }) {
  const data = calculateReport(item);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
});