Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «cleanup у useEffect». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Функція очищення (cleanup)** - це функція, яку ти повертаєш з `useEffect`; React викликає її, коли потрібно "очистити" наслідки попереднього ефекту: відписатися, зупинити таймер, скасувати запит, видалити обробник тощо. **Ключове:** cleanup викликається перед повторним виконанням ефекту і при демонтуванні компонента, щоб уникнути витоків пам'яті та дублюючих побічних ефектів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що робить функція очищення (cleanup) в `useEffect` Функція очищення - це **функція, яку ти повертаєш з** `useEffect`. React викликає її, коли потрібно **"очистити" наслідки** попереднього ефекту: відписатися, зупинити таймер, скасувати запит, видалити обробник тощо. --- ### Синтаксис ```javascript useEffect(() => { // побічний ефект console.log("Ефект запущено"); return () => { // cleanup - функція очищення console.log("Ефект очищено"); }; }, []); ``` --- ## Коли викликається cleanup | Ситуація | Коли викликається cleanup | |---|---| | Компонент **демонтується** | Перед видаленням компонента з екрана | | Ефект **перезапускається** (при зміні залежностей) | Перед виконанням нового ефекту | | Ефект **ніколи не викликався** | Cleanup теж не викликається | --- ### Простіше кажучи: React робить так: 1. Виконати ефект 2. Якщо залежності змінилися: - викликати **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`: 1. React викликає cleanup -> `clearInterval(timer)` 2. Потім запускає новий `setInterval` Це запобігає "накопиченню" кількох таймерів одночасно. --- ## Навіщо потрібен cleanup Запобігає витокам пам'яті (наприклад, незакритим підпискам, таймерам). Уникає дублювання ефектів при оновленні залежностей. Забезпечує коректне "життя" компонента (монтування -> оновлення -> демонтування). --- ## Підсумок | Питання | Відповідь | |---|---| | Що робить cleanup | Очищає наслідки ефекту (відписки, таймери, запити тощо) | | Коли викликається | Перед повторним виконанням ефекту і при демонтуванні компонента | | Навіщо потрібен | Щоб уникнути витоків пам'яті та дублюючих побічних ефектів |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.