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

React при обновлении компонента сравнивает новые пропсы с предыдущими, чтобы определить, нужно ли перерисовывать компонент. В большинстве случаев React использует поверхностное сравнение (shallow comparison) для пропсов.

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

Например, если пропс — объект с теми же ключами и значениями, но это новый объект (новая ссылка), React посчитает, что пропсы изменились, и компонент перерисуется.

Это важно учитывать при оптимизации компонентов, например, при использовании React.memo или shouldComponentUpdate, чтобы избегать ненужных перерисовок, нужно передавать неизменяемые объекты или мемоизировать пропсы.