Какие знаешь триггеры для повторного рендеринга компонента

«Какие знаешь триггеры для повторного рендеринга компонента» — вопрос из категории Архитектура, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

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

  1. Изменение состояния (setState или хуки useState, useReducer)
  2. Изменение пропсов (новые значения от родителя)
  3. Изменение контекста (если компонент подписан через useContext)
  4. Принудительный ререндер через forceUpdate() (в классовых компонентах)
  5. Изменение зависимостей в хуках (useEffect, useMemo, useCallback)

Пример с состоянием:

const [count, setCount] = useState(0);
// Вызов setCount вызовет ререндер
<button onClick={() => setCount(c => c + 1)}>Increment</button>

Важно: React использует виртуальный DOM и может пропустить фактическое обновление DOM, если ничего не изменилось (shallow сравнение).