Как работает жизненный цикл React-компонентов

Что проверяют

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

Как отвечать

Три фазы.

Монтирование. Компонент создаётся, выполняется тело функции, результат попадает в DOM. В хуках после этого срабатывает useEffect с пустым массивом зависимостей.

Обновление. Изменилось состояние, контекст или пропсы: тело выполняется заново, React сравнивает результат с предыдущим и меняет в DOM только различия. Эффекты с зависимостями срабатывают, если зависимости изменились, причём сначала выполняется функция очистки от прошлого запуска.

Размонтирование. Компонент убирается, выполняются все функции очистки: снимаются подписки, чистятся таймеры.

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);   // очистка: и при размонтировании, и перед следующим запуском
}, [delay]);

Полезно отличать useEffect от useLayoutEffect: первый выполняется после отрисовки и не блокирует её, второй до, и нужен, когда надо измерить узел и поправить разметку без мигания.

Где спотыкаются

Считают, что эффект с пустым массивом выполняется строго один раз. В строгом режиме разработки React намеренно монтирует компонент дважды, чтобы показать незакрытые подписки.

Забывают очистку и оставляют работающие таймеры и слушатели после ухода со страницы.

Пытаются в функциональном компоненте искать аналог shouldComponentUpdate и не знают про memo.

Путают порядок: очистка прошлого эффекта выполняется до нового запуска, а не после.