Какой у вас опыт работы с JDK 11?

А, ну ты смотри, какие дела творятся в мире программирования! Читаю я тут про этот ваш useEffect в React, и понимаю — народ-то, блядь, реально путается, как слепой кот в сортире. Ну ладно, объясняю на пальцах, чтобы даже мартышке с бананом стало понятно.

Вот смотри, есть у тебя компонент. И ты хочешь, чтобы он что-то делал не просто так, а в ответ на какое-то событие: данные пришли, переменная поменялась, пользователь на кнопку нажал. Раньше, в классовых компонентах, были componentDidMount, componentDidUpdate и прочая хуйня. А теперь пришёл useEffect и говорит: «Забудь про эту кашу, я всё объединю!».

Представь, что твой компонент — это квартира. useEffect — это твой личный домработник, немного, прости, туповатый. Ты ему говоришь: «Слушай сюда, дружок-пирожок. Вот тебе список дел (это твоя функция-эффект). И вот тебе список зависимостей (массив deps). Ты делай эти дела, но только когда что-то из этого списка поменяется. Понял?».

useEffect(() => {
  // Тут твой код, который должен сработать как эффект
  console.log('Зависимость изменилась, работаю!');
  // Можешь тут данные грузить, подписки делать, таймеры ставить
}, [dependency]); // <-- Вот этот самый список

А он тебе в ответ: «Ага, щас сделаю». И начинает думать. Если массив зависимостей пустой [], он делает дело ровно ОДИН РАЗ, после первого рендера. Типа «прибраться при заселении». Если в массиве что-то есть — он будет сравнивать старое значение с новым после каждого рендера. Изменилось? Щас, блядь, бегом выполняю инструкцию! Не изменилось? Сижу, курю, дальше работаю.

А теперь главная засада, где все и обламываются, как об стенку горох. Забывают про уборку! Ты же домработнику сказал: «Вот тебе задача — слушать событие скролла на окне». Он повесил слушатель. А потом компонент твой исчезает со страницы (размонтируется). А слушатель-то висит! И будет висеть, как срам на заборе, пока приложение не упадёт или память не кончится. Поэтому ты ДОЛЖЕН, блядь, ОБЯЗАН сказать ему: «А когда работу закончишь — всё за собой прибери!».

useEffect(() => {
  const handleScroll = () => {
    console.log('Прокрутили!');
  };

  window.addEventListener('scroll', handleScroll);

  // А ВОТ И ФУНКЦИЯ УБОРКИ! Возвращаешь её — и он её вызовет перед смертью компонента.
  return () => {
    window.removeEventListener('scroll', handleScroll);
    console.log('Всё, я прибрал, можно умирать.');
  };
}, []);

Вот и вся магия, ёпта. Создал эффект — подумай, как его потом уничтожить. Не думаешь? Получаешь утечку памяти, тормоза и вопросы на собеседовании, на которые отвечаешь, как полупидор, опустив глаза.

И ещё один момент, чтоб два раза не вставать. Не пихай в зависимости всё подряд, а то твой эффект будет срабатывать чаще, чем ты моргаешь. Нужна конкретная переменная, от которой он зависит? Вот её и клади. Ничего не нужно? Пустой массив. Нужно, чтобы вообще после каждого рендера бегал? Тогда не передавай второй аргумент вообще. Но будь готов, что он превратится в истеричку, которая мечется туда-сюда без причины.

Короче, useEffect — он как огонь. Может и суп согреть, и хату спалить. Думай, что делаешь, и не забывай за собой убирать. Всё, лекция окончена, можете расходиться.