cleanup у useEffect

ReactJunior~1 хв читання

Що робить функція очищення (cleanup) в `useEffect`

Функція очищення - це функція, яку ти повертаєш з useEffect. React викликає її, коли потрібно "очистити" наслідки попереднього ефекту: відписатися, зупинити таймер, скасувати запит, видалити обробник тощо.

Синтаксис

javascript

useEffect(() => {
  // побічний ефект
  console.log("Ефект запущено");

  return () => {
    // cleanup - функція очищення
    console.log("Ефект очищено");
  };
}, []);

Коли викликається cleanup

Ситуація	Коли викликається cleanup
Компонент демонтується	Перед видаленням компонента з екрана
Ефект перезапускається (при зміні залежностей)	Перед виконанням нового ефекту
Ефект ніколи не викликався	Cleanup теж не викликається

Простіше кажучи:

React робить так:

Виконати ефект
Якщо залежності змінилися:

викликати cleanup старого ефекту,
потім викликати новий ефект

Приклад 1 - підписка на подію

javascript

useEffect(() => {
  function handleResize() {
    console.log(window.innerWidth);
  }

  window.addEventListener("resize", handleResize);
  console.log("Підписку встановлено");

  // Очищення: відписуємося, коли компонент видаляється
  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Підписку видалено");
  };
}, []); // тільки при монтуванні

Що відбудеться:

При монтуванні: додасться слухач подій.
При демонтуванні: видалиться слухач (cleanup).

Приклад 2 - ефект із залежністю

javascript

useEffect(() => {
  const timer = setInterval(() => console.log("tick"), 1000);

  return () => {
    clearInterval(timer); // очищаємо старий інтервал
  };
}, [count]);

Тут при кожній зміні count:

React викликає cleanup -> clearInterval(timer)
Потім запускає новий setInterval

Це запобігає "накопиченню" кількох таймерів одночасно.

Навіщо потрібен cleanup

Запобігає витокам пам'яті (наприклад, незакритим підпискам, таймерам). Уникає дублювання ефектів при оновленні залежностей. Забезпечує коректне "життя" компонента (монтування -> оновлення -> демонтування).

Підсумок

Питання	Відповідь
Що робить cleanup	Очищає наслідки ефекту (відписки, таймери, запити тощо)
Коли викликається	Перед повторним виконанням ефекту і при демонтуванні компонента
Навіщо потрібен	Щоб уникнути витоків пам'яті та дублюючих побічних ефектів

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.