> Перерендеривается ли компонент только при изменении стейта или пропсов? (React)

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

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

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

В React компонент перерендеривается в следующих случаях:

1. Изменение состояния (state): вызов setState или dispatch в хуках (useState, useReducer) всегда вызывает рендер компонента, даже если новое состояние равно предыдущему (в функциональных компонентах - да, в классовых - нет, если не использовать forceUpdate).

2. Изменение пропсов (props): при ререндере родительского компонента все дочерние компоненты также перерендериваются по умолчанию. React сравнивает виртуальные DOM-деревья, но сам рендер функции компонента происходит всегда.

3. Контекст (Context): если компонент использует useContext или Context.Consumer, он перерендерится при любом изменении значения контекста, даже если стейт и пропсы не менялись.

4. forceUpdate: принудительный вызов перерендера.

5. Ререндер родителя: самый частый случай - родительский компонент перерендерился, и все его дочерние компоненты (включая тех, чьи пропсы не изменились) тоже перерендерятся.

Важно понимать: React не выполняет глубокое сравнение пропсов по умолчанию. Он просто вызывает функцию компонента с новыми пропсами. Оптимизация через React.memo или PureComponent добавляет поверхностное сравнение (shallow comparison) пропсов, но это не поведение по умолчанию.

На практике

Для senior-разработчика важно:

• Понимать, что ререндер - это вызов функции компонента, а не обновление DOM. React сравнивает виртуальные деревья и обновляет только изменившиеся части реального DOM.
• Использовать React.memo только когда есть измеримая проблема производительности, а не превентивно.
• Знать, что передача новых ссылок на объекты/функции в пропсах (например, inline-функции в JSX) ломает оптимизацию React.memo.
• Понимать, что изменение контекста вызывает ререндер всех потребителей, даже если они мемоизированы.
• Использовать useMemo и useCallback для стабилизации ссылок, но только при необходимости.

Пример кода

JSX
const Parent = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      {/* Child перерендерится при каждом клике, даже если пропсы не меняются */}
      <Child />
      {/* MemoizedChild перерендерится только при изменении пропсов */}
      <MemoizedChild />
    </div>
  );
};

const Child = () => {
  console.log('Child render');
  return <div>Child</div>;
};

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

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

Начни с прямого ответа: "Нет, не только". Перечисли основные причины ререндера, выделив ререндер от родителя как самый частый и неочевидный для новичков. Покажи понимание разницы между вызовом функции компонента и обновлением DOM. Упомяни, что React.memo - это не гарантия, а оптимизация, и объясни, когда она работает, а когда нет. Если спросят про контекст, добавь, что он ломает мемоизацию. Не углубляйся в детали реализации fiber-дерева, если не спросят.

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

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

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

• Утверждение, что компонент перерендеривается только при изменении стейта или пропсов.
• Путаница между ререндером компонента и обновлением DOM.
• Уверенность, что React.memo предотвращает ререндер при любых обстоятельствах.
• Игнорирование контекста как причины ререндера.
• Мнение, что изменение пропсов всегда означает изменение данных (React не сравнивает пропсы глубоко).