Как реализовать cleanup-функцию в useEffect?

Question

Cleanup-функция реализуется возвратом функции из useEffect. Эта функция вызывается перед повторным выполнением эффекта и при размонтировании компонента. Cleanup используется для очистки таймеров, подписок и слушателей событий. Это предотвращает утечки памяти и некорректное поведение.

YeaHub · Accepted Answer

Любой эффект, который что-то “подписывает” или создаёт ресурс, должен уметь его очищать.ОпределениеCleanup-функция — функция, возвращаемая из useEffect, предназначенная для очистки побочного эффекта.Пример с подпискойuseEffect(() => {
  const handler = () => console.log("resize");
  window.addEventListener("resize", handler);

return () => {
    window.removeEventListener("resize", handler);
  };
}, []);
Пример с таймеромuseEffect(() => {
  const id = setInterval(() => {
    console.log("tick");
  }, 1000);

return () => clearInterval(id);
}, []);
Когда cleanup обязателенСобытия (addEventListener).Таймеры (setTimeout, setInterval).Подписки (WebSocket, RxJS).Сторонние библиотеки.ВыводCleanup-функция — обязательная часть корректного useEffect, если эффект создаёт долгоживущие ресурсы.