Какие задачи хочешь решать

Ну, вот смотри, есть такая штука — useEffect в Реакте. Представь себе, что это такой универсальный мужик-завхоз в твоём компоненте. Его задача — делать всю хуйню, которая не влезает в сам рендер: данные подтянуть, подписки повесить, таймеры запустить.

Вот пишешь ты компонент, а он, блядь, как живой — родился, отрисовался, обновился, помер. И на каждом из этих этапов тебе надо что-то делать. Вот тут-то наш завхоз и пригождается.

useEffect(() => {
  // Вот эта функция — это и есть работа завхоза. Она выполнится ПОСЛЕ того, как компонент вставится в DOM.
  console.log('Компонент примонтировался, можно хуярить бизнес-логику!');

  // А это — функция уборки. Как будто завхозу дали звонок: "Вася, компонент скоро сдохнет, за собой прибери!"
  return () => {
    console.log('Компонент будет размонтирован. Отписываюсь от всего, чищу таймеры, чтобы утечек не было.');
  };
}, []); // Видишь этот пустой массив? Это — святое. Это список зависимостей.

А теперь про этот самый массив зависимостей — это вообще отдельная песня, ебать колотить. От него всё и пляшет.

1. Без массива вообще — завхоз сходит с ума и работает после КАЖДОГО рендера. Написал console.log — он после каждого чиха в консоль плюнет. Сделал запрос на сервер — он будет слать его бесконечно. Пиздец, а не оптимизация.
2. С пустым массивом [] — это режим "только один раз, когда родился". Идеально для начальной загрузки данных или подписок. Завхоз отработает при рождении и уберётся при смерти. Красота.
3. С массивом, в котором что-то есть [userId, page] — вот тут начинается магия. Завхоз теперь умный. Он будет сравнивать: "А че, userId-то изменился с прошлого раза? Или page другой стал?" Если да — он заново выполняет свою работу и уборку. Если нет — сидит, курит бамбук. Это охуенно для синхронизации с внешним миром.

useEffect(() => {
  // Этот эффект сработает при первом рендере И каждый раз, когда поменяется пропс `userId`
  fetch(`/api/user/${userId}`)
    .then(response => response.json())
    .then(data => setUser(data));

  // А почистится перед следующим выполнением или при размонтировании
}, [userId]); // Следим за userId. Изменился — пошёл новый запрос.

Главная засада, в которую все влетают, — это забыть что-то в этом массиве зависимостей положить. React тебе даже в консоли орёт: "Э, бошка думай! Ты используешь setData из хука, но не положил его в зависимости!". И он прав, сука. Если функция из того же компонента или пропс используется внутри эффекта — её туда. Иначе эффект будет работать со старыми, замыленными значениями, и будет тебе хиросима, а не интерфейс.

Короче, useEffect — это мощный инструмент, но как лом: можно гвоздь забить, а можно себе по ебалу получить. Главное — чётко понимать, когда он запускается и за чем следит. Всё остальное — дело техники и пары часов дебага, когда что-то идёт не так.