Как React сравнивает пропсы? Как работает поверхностное сравнение?

Как React сравнивает пропсы

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

Пример поверхностного сравнения

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

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

// При таком вызове компонент не ререндерится:
const data = { value: 1 };
<MyComponent data={data} />
<MyComponent data={data} /> // ссылка та же

// А при таком — ререндерится:
<MyComponent data={{ value: 1 }} />
<MyComponent data={{ value: 1 }} /> // разные ссылки

Как это работает

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

Практическое применение

Поверхностное сравнение эффективно для примитивных типов (числа, строки, булевы значения) и неизменяемых объектов. Если вы передаете объекты, которые часто меняются, рекомендуется использовать useMemo или useCallback для стабилизации ссылок:

const memoizedData = useMemo(() => ({ value: 1 }), []);
<MyComponent data={memoizedData} />

Вывод

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