Что произойдёт с дочерними компонентами при перерендере родителя, если они не обёрнуты в React.memo?

Поведение дочерних компонентов при перерендере родителя

В React, когда родительский компонент перерендеривается (например, из-за изменения состояния или пропсов), все его дочерние компоненты также перерендериваются по умолчанию. Это происходит рекурсивно: каждый дочерний компонент, в свою очередь, перерендеривает своих потомков. Такое поведение гарантирует, что пользовательский интерфейс всегда синхронизирован с текущим состоянием приложения.

Пример без React.memo

import React, { useState } from 'react';

const Child = ({ name }) => {
  console.log('Child rendered:', name);
  return <div>{name}</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Click</button>
      <Child name="Alice" />
      <Child name="Bob" />
    </div>
  );
};

При каждом клике на кнопку оба дочерних компонента будут перерендериваться, даже если их пропсы не изменились. Это видно по выводу в консоль.

Как React.memo решает проблему

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

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

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

Вывод

Используйте React.memo для оптимизации производительности в случаях, когда дочерние компоненты часто перерендериваются из-за изменений в родителе, но их пропсы редко меняются. Однако не стоит оборачивать каждый компонент в React.memo без необходимости, так как это добавляет накладные расходы на сравнение пропсов.