Что такое стек в JVM

А, ну это же про ту самую хуйню с useEffect и зависимостями! Слушай, история старая, как мир, но каждый раз кто-то на неё наступает, как слепой кот на грабли.

Вот представь: пишешь ты компонент, всё красиво, логика внутри useEffect. И в массив зависимостей суёшь всё, что шевелится, на всякий случай. А потом — бац! — бесконечный рендеринг, и приложение накрывается медным тазом. Удивление пиздец! Ты сидишь, смотришь в код, и подозрение ебать чувствую, что где-то тут собака зарыта.

А собака-то, сука, простая. useEffect — он как тот самый полупидор на вечеринке: если его позвать (запустить), он отработает своё. А если в массиве зависимостей у тебя объект или массив, который создаётся заново при каждом рендере... Ёпта, да он же будет запускаться после каждого рендера! Получается пиздопроебина полная.

Вот смотри, классический пример, где все лажают:

function MyComponent({ someProp }) {
  const [state, setState] = useState(0);

  const myObject = { key: someProp }; // Создаётся заново каждый раз!
  const myArray = [state]; // И это тоже!

  useEffect(() => {
    // Какая-то логика с myObject и myArray
    console.log('Effect runs!');
  }, [myObject, myArray]); // Вот этот массив — причина всех бед!

  return <div>...</div>;
}

Сам от себя охуел, когда впервые это понял. Кажется же, логично: «Я использую myObject внутри эффекта, значит, должен добавить его в зависимости». Ан нет! Поскольку объект и массив при каждом рендере — новые (даже если значения внутри те же), React их сравнивает, видит, что ссылки разные, и взъёбывает эффект снова. И пошло-поехало.

Волнение ебать начинается, когда ищешь причину. А выход-то простой, чувак:

1. Да похуй — вынести определение объекта/массива внутрь самого эффекта, если они там только и нужны.
2. Использовать useMemo или useCallback, чтобы мемоизировать эти значения и не создавать их заново, если реальные зависимости (someProp, state) не изменились.

function MyComponent({ someProp }) {
  const [state, setState] = useState(0);

  const myObject = useMemo(() => ({ key: someProp }), [someProp]); // Теперь стабильная ссылка
  const myArray = useMemo(() => [state], [state]);

  useEffect(() => {
    console.log('Effect runs only when someProp or state changes!');
  }, [myObject, myArray]); // Всё, теперь ссылки меняются только когда нужно

  return <div>...</div>;
}

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