Как работает useEffect и что такое массив зависимостей?

Модель: эффект синхронизирует компонент с чем-то вне React. При каждом изменении зависимостей React сначала вызывает очистку предыдущего эффекта, затем новый эффект.

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

• пропущенная зависимость — эффект видит устаревшие значения (замыкание из старого рендера);
• объект или функция, создаваемые в рендере, в зависимостях — эффект срабатывает каждый раз; выносить наружу, useMemo/useCallback или зависеть от примитивов;
• setState в эффекте без условия — бесконечный цикл;
• отсутствие очистки — утечки подписок, гонки запросов (ответ на старый id приходит позже нового).

Не нужен эффект, когда значение можно вычислить из props и state при рендере, или когда реакция на действие пользователя — это код в обработчике события.

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/users/${id}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(e => { if (e.name !== "AbortError") setError(e); });
  return () => controller.abort();     // отменить при смене id и размонтировании
}, [id]);