> Какие триггеры вызывают перерисовку React компонента (React)

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

В React компонент перерисовывается при трёх основных триггерах: изменение state через setState/useState, изменение props от родителя, вызов forceUpdate. Также перерисовка происходит при изменении контекста (Context API), если компонент подписан на него. В функциональных компонентах повторный рендер запускается при изменении зависимостей хуков (useEffect, useMemo, useCallback).

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

React управляет рендерингом через виртуальный DOM. Перерисовка (re-render) - это повторный вызов функции компонента или метода render для классового компонента. Основные триггеры:

1. Изменение state: вызов setState в классовых или setState/useState в функциональных компонентах. React помечает компонент как "грязный" и планирует повторный рендер.

2. Изменение props: когда родительский компонент перерисовывается, он передаёт новые props дочерним компонентам. Даже если props не изменились (по ссылке), дочерний компонент всё равно перерисовывается, если не оптимизирован через React.memo или shouldComponentUpdate.

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

4. forceUpdate: принудительный вызов перерисовки, игнорирующий shouldComponentUpdate. Используется редко, обычно для внешних мутаций.

Важно понимать: React не гарантирует, что перерисовка произойдёт синхронно. В Concurrent Mode рендер может быть прерван или отложен. Также React группирует множественные setState в один рендер (batching).

На практике

Для senior-уровня критично понимать разницу между "перерисовкой" (re-render) и "перестроением DOM" (commit). React может вызвать компонент, но не обновить реальный DOM, если виртуальный DOM не изменился.

Основные проблемы на практике:

• Лишние перерисовки из-за создания новых ссылок на объекты/функции при каждом рендере родителя. Решение: useCallback, useMemo, вынос констант за компонент.
• Цепные перерисовки при неправильной структуре контекста - изменение контекста перерисовывает всех потребителей, даже если они не используют изменившуюся часть.
• Синхронные setState в циклах - React батчит их автоматически в синхронных обработчиках, но не в асинхронных (setTimeout, Promise) до React 18. В React 18 батчинг работает везде.

Инструменты для отладки: React DevTools Profiler, console.log в теле компонента, React.memo с isEqual.

Пример кода

JSX
// Пример лишней перерисовки из-за создания новой функции
function Parent() {
  const [count, setCount] = useState(0);
  
  // Проблема: каждый рендер создаёт новую ссылку
  return <Child onClick={() => setCount(c => c + 1)} />;
}

// Решение с useCallback
function ParentFixed() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);
  
  return <Child onClick={handleClick} />;
}

// Пример с контекстом - избегаем лишних перерисовок
const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  // Проблема: каждый рендер создаёт новый объект value
  // const value = { user, setUser };
  
  // Решение: мемоизация
  const value = useMemo(() => ({ user, setUser }), [user]);
  
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
}

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

Начни с трёх основных триггеров (state, props, context), затем добавь forceUpdate. Покажи понимание внутренних механизмов: React помечает компонент как "dirty" и запускает reconciliation. Упомяни, что перерисовка не равна обновлению DOM - это два разных этапа (render phase и commit phase). Для senior важно сказать про батчинг и Concurrent Mode. Приведи пример оптимизации через React.memo и useCallback. Заверши практическим советом: используй React DevTools Profiler для выявления лишних перерисовок.

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

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

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

• Путать перерисовку компонента с обновлением DOM
• Думать, что React.memo предотвращает перерисовку при изменении props - он только сравнивает props поверхностно
• Считать, что setState всегда вызывает синхронную перерисовку
• Игнорировать перерисовку из-за контекста - думать, что useContext работает как селектор
• Создавать новые объекты/функции в теле компонента и передавать их в дочерние компоненты без мемоизации
• Использовать index как key в списках - это вызывает лишние перерисовки и потерю состояния