Гарантирует ли React.memo отсутствие лишних перерендеров, если в пропсы передаются сложные объекты или массивы?

Как работает React.memo

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

Проблема с объектами и массивами

Если в пропсы передаются сложные объекты или массивы, которые создаются заново при каждом рендере родителя (например, литералы объектов или массивов, результаты вызовов функций), то ссылка на них будет новой. React.memo увидит, что ссылка изменилась, и выполнит перерендер, даже если содержимое объекта или массива осталось прежним.

// Пример: каждый раз создается новый объект
function Parent() {
  const [count, setCount] = useState(0);
  const data = { name: 'John' }; // новая ссылка при каждом рендере
  return <Child data={data} />;
}

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

В этом примере Child будет перерендериваться при каждом изменении count, несмотря на React.memo, потому что объект data создается заново.

Как решить проблему

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

• useMemo — для мемоизации вычисляемых значений
• useCallback — для мемоизации функций
• Вынос констант за пределы компонента

// Использование useMemo для стабилизации ссылки
function Parent() {
  const [count, setCount] = useState(0);
  const data = useMemo(() => ({ name: 'John' }), []);
  return <Child data={data} />;
}

Вывод

React.memo эффективен только при стабильных ссылках на пропсы. Для сложных объектов и массивов необходимо использовать мемоизацию с помощью useMemo или выносить неизменяемые данные за пределы компонента. В противном случае React.memo не даст ожидаемого эффекта и может даже ухудшить производительность из-за накладных расходов на сравнение.