> Рендерится ли дочерний React компонент, если родительский отрендерился, а пропсы не изменились? (React)

Короткий ответ

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

Подробное объяснение

Когда родительский компонент ререндерится, React по умолчанию рекурсивно ререндерит всё дерево дочерних компонентов. Это поведение заложено в алгоритм работы React: он не делает предположений о том, изменились ли пропсы дочернего компонента, если не указано иное.

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

Исключения:

• React.memo - обёртка для функциональных компонентов, которая выполняет поверхностное сравнение пропсов и пропускает ререндер, если они не изменились.
• PureComponent - для классовых компонентов, делает то же самое через shouldComponentUpdate.
• Ручная реализация shouldComponentUpdate для точного контроля.

Важно: даже с React.memo ререндер всё равно произойдёт, если внутри компонента используется контекст, который изменился, или если сам компонент хранит состояние, которое обновляется.

На практике

На практике эта тема важна для оптимизации производительности, особенно в больших списках, сложных формах или компонентах с тяжёлой логикой рендеринга.

Рекомендации:

• Используйте React.memo только когда есть реальная проблема с производительностью, а не превентивно - каждое сравнение пропсов тоже стоит ресурсов.
• Для списков используйте ключи (key), чтобы React мог эффективно определять, какие элементы изменились.
• Помните, что React.memo сравнивает пропсы поверхностно - если передаёте объекты или функции, создаваемые при каждом рендере, оптимизация не сработает. Используйте useCallback и useMemo.
• В классовых компонентах PureComponent может дать ложное чувство безопасности - он не проверяет изменения в глубоко вложенных объектах.

Пример кода

JSX
// Без оптимизации - дочерний компонент ререндерится всегда
function Child({ name }) {
  console.log('Child rendered');
  return <div>{name}</div>;
}

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Click</button>
      <Child name="John" />
    </div>
  );
}
// При каждом клике в консоли будет "Child rendered"

// С оптимизацией
const ChildMemo = React.memo(function Child({ name }) {
  console.log('Child rendered');
  return <div>{name}</div>;
});

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Click</button>
      <ChildMemo name="John" />
    </div>
  );
}
// "Child rendered" только при первом рендере

Как отвечать на собеседовании

Начните с прямого ответа: да, дочерний компонент ререндерится. Объясните, почему это поведение выбрано по умолчанию (простота и предсказуемость против преждевременной оптимизации). Упомяните React.memo и PureComponent как инструменты для отключения этого поведения. Добавьте нюансы про поверхностное сравнение, контекст и ключи. Хорошо показать понимание trade-off между производительностью сравнения и производительностью рендеринга.

Что проверяет интервьюер

• Понимание базового механизма ререндера в React.
• Знание инструментов оптимизации (React.memo, PureComponent, shouldComponentUpdate).
• Осознание, что оптимизация не бесплатна и нужна не всегда.
• Понимание ограничений поверхностного сравнения и роли контекста.
• Умение объяснить, когда и зачем применять эти техники.

Типичные ошибки

• Утверждение, что React сам не ререндерит дочерние компоненты, если пропсы не изменились - это неверно.
• Использование React.memo для всех компонентов подряд без реальной необходимости.
• Забывание, что React.memo не работает с пропсами-объектами или функциями, создаваемыми заново при каждом рендере.
• Путаница между React.memo и useMemo - это разные инструменты для разных задач.
• Игнорирование влияния контекста на ререндер даже при использовании React.memo.