Почему мемоизация может не работать при передаче объектов?

Почему мемоизация не работает с объектами

Мемоизация в React — это техника оптимизации, которая предотвращает повторные рендеры или вычисления, если входные данные не изменились. Однако она основана на поверхностном сравнении (shallow comparison), то есть сравниваются ссылки на объекты, а не их содержимое. Если при каждом рендере создается новый объект, его ссылка будет отличаться от предыдущей, и мемоизация посчитает, что данные изменились.

Пример проблемы

Рассмотрим компонент, который использует React.memo:

const Child = React.memo(({ data }) => {
  console.log('Child rendered');
  return <div>{data.value}</div>;
});

function Parent() {
  const data = { value: 'test' }; // новый объект при каждом рендере
  return <Child data={data} />;
}

Каждый раз, когда Parent рендерится, создается новый объект data с новой ссылкой. React.memo видит, что пропс data изменился (ссылка другая), и перерисовывает Child, несмотря на то, что содержимое объекта одинаковое.

Как это исправить

Чтобы мемоизация работала, нужно стабилизировать ссылку на объект. Для этого используйте useMemo или useCallback:

function Parent() {
  const data = useMemo(() => ({ value: 'test' }), []);
  return <Child data={data} />;
}

Теперь объект data будет создан один раз и будет иметь ту же ссылку при последующих рендерах, если зависимости не изменятся.

Вывод

Мемоизация с объектами требует стабильных ссылок. Используйте useMemo для объектов и useCallback для функций, чтобы избежать лишних рендеров. Если объект зависит от пропсов или состояния, включите их в массив зависимостей — тогда мемоизация будет корректно обновляться при изменении данных.