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

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

Знаете ли вы про пустой массив зависимостей и понимаете ли последствия: устаревшие значения, двойной вызов в разработке, необходимость очистки.

Как отвечать

Код выполняется один раз после монтирования, если передать пустой массив зависимостей:

useEffect(() => {
  const controller = new AbortController();
  loadJobs({ signal: controller.signal }).then(setJobs).catch(ignoreAbort);
  return () => controller.abort();   // очистка при размонтировании
}, []);

Что важно проговорить:

• функция очистки возвращается из эффекта и вызывается при размонтировании: отписки, таймеры, отмена запросов. Без неё запрос вернётся в исчезнувший компонент, а подписка останется висеть;
• в строгом режиме разработки эффект выполняется дважды намеренно, чтобы обнаружить незакрытые ресурсы. Это не ошибка, и «лечить» её флагом в ссылке не нужно, нужно написать корректную очистку;
• пустой массив замыкает значения первого рендера. Если внутри используются пропсы или состояние, они останутся старыми навсегда. Значит либо добавить их в зависимости, либо читать актуальное значение через ссылку;
• линтер прав: правило про полный список зависимостей существует не зря, и подавлять его комментарием стоит только с пониманием, что делаете.

Отдельно скажите, когда эффект не нужен вовсе: для вычисления значения из пропсов (считается прямо при рендере), для реакции на действие пользователя (код пишется в обработчике), а для загрузки данных в приложениях с фреймворком чаще берут серверные компоненты или библиотеку запросов, где отмена и кеш уже решены.

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

Ставят пустой массив, чтобы «выполнилось один раз», и получают устаревшее состояние.

Не отменяют запрос и обновляют состояние размонтированного компонента.

Пытаются подавить двойной вызов в разработке вместо написания очистки.