PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Как useMemo сверяет пропсы?

Хуки

Вопрос содержит подмену: useMemo пропсы не сверяет — он сравнивает свой массив зависимостей. Пропсы сверяет React.memo. Механизм сравнения при этом у них общий.

Что сверяет useMemo

const config = useMemo(() => buildConfig(theme, locale), [theme, locale]);

На каждом рендере React поэлементно сравнивает deps с прошлыми значениями через Object.is: все равны — возвращается кеш; хоть один отличается — колбэк пересчитывается. Пропсы компонента тут ни при чём — сравниваются только перечисленные зависимости (которые могут быть пропсами, а могут не быть).

Кто сверяет пропсы: React.memo

const Card = React.memo(CardInner);

При рендере родителя React.memo делает shallow equal по всем пропсам (каждый через Object.is): равны — рендер пропускается.

Как они работают вместе

useMemo у родителя готовит стабильные ссылки, чтобы сравнение пропсов у memo-ребёнка проходило:

const Parent = () => {
  const options = useMemo(() => ({ pageSize: 20 }), []); // стабильная ссылка
  return <Card options={options} />;                      // memo сработает
};
// без useMemo options — новый объект каждый рендер → memo бесполезен

Общая механика сравнения

И deps useMemo, и пропсы в React.memo сравниваются одинаково: Object.is, поверхностно — примитивы по значению, объекты/функции/массивы по ссылке, без глубокого сравнения. Поэтому вся мемоизация в React строится на стабильности ссылок.

Коротко для собеседования

useMemo сверяет не пропсы, а свои deps (поэлементно, Object.is): равны — кеш, нет — пересчёт. Пропсы поверхностно сверяет React.memo. Связка: useMemo у родителя стабилизирует ссылки-пропсы, чтобы React.memo у ребёнка мог пропустить рендер; сравнение везде ссылочное, глубокого нет.

Другие вопросы раздела