Как очистить интервал при размонтировании компонента?

В React компоненты могут создавать побочные эффекты, такие как таймеры, подписки на события или запросы к API. Если эти эффекты не очищать при удалении компонента из DOM (размонтировании), они продолжат выполняться в фоне, что может привести к утечкам памяти, ошибкам (например, попытке обновить состояние несуществующего компонента) и неожиданному поведению приложения.

Очистка в функциональных компонентах (с хуками)

Для управления побочными эффектами в функциональных компонентах используется хук useEffect. Функция, переданная в useEffect, может возвращать другую функцию, которая будет выполнена перед следующим вызовом эффекта или при размонтировании компонента. Это место для очистки.

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Создаём интервал
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // Функция очистки: выполнится при размонтировании
    return () => {
      clearInterval(intervalId);
    };
  }, []); // Пустой массив зависимостей = эффект выполняется только при монтировании

  return Счёт: {count};
}

Очистка в классовых компонентах

В классовых компонентах для создания интервала обычно используется метод componentDidMount, а для очистки — метод жизненного цикла componentWillUnmount.

import React from 'react';

class TimerComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.intervalId = null;
  }

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState(prevState => ({ count: prevState.count + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    // Очищаем интервал при размонтировании
    clearInterval(this.intervalId);
  }

  render() {
    return Счёт: {this.state.count};
  }
}

Почему это важно и где применяется

Эта практика критически важна в любом React-приложении, где компоненты динамически монтируются и размонтируются, например:

• Страницы с таймерами или обратным отсчётом.
• Компоненты, которые периодически опрашивают сервер (polling).
• Приложения с маршрутизацией (React Router), где компоненты меняются при переходе между страницами.
• Любые компоненты, использующие setInterval, setTimeout или WebSocket-подписки.

Итог: Всегда очищайте интервалы и таймеры в функции очистки useEffect или в методе componentWillUnmount. Это обязательное правило для написания чистого, безопасного и эффективного React-кода, которое предотвращает серьёзные ошибки в работе приложения.