Все ли документы на руках

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

Но вот в чём прикол: если ты ему в массив зависимостей напишешь [] — пустой массив, — то он отработает только один раз, при первом рендере. Как будто он пришёл, посмотрел, сказал «окей, тут нихуя не меняется» и забил болт. И больше не реагирует ни на что, даже если у тебя стейты обновляются, пропсы летят — ему похуй. Он уже отработал и спит.

А если ты вообще не укажешь второй аргумент, то этот мужик будет срать кирпичами после каждого рендера. Каждый раз, когда компонент обновляется, он будет запускаться. Это как если бы ты каждый раз заходил на кухню и включал чайник, даже если вода уже кипит. Бесполезно и ресурсы жрёт.

Вот пример, чтобы было понятнее:

useEffect(() => {
  console.log('Я отработал один раз, при монтировании');
}, []); // Пустой массив — только при первом рендере

useEffect(() => {
  console.log('Я отработаю при каждом рендере');
}); // Нет второго аргумента — после каждого обновления

useEffect(() => {
  console.log('Я слежу за переменной "count"');
}, [count]); // Зависимость от count — сработает, когда count изменится

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