На что нужно обратить внимание при подписке на события (например scroll на window) или запуске таймеров в компоненте, чтобы избежать утечек памяти?

Проблема утечек памяти

Когда компонент подписывается на глобальные события (например, scroll на window) или запускает таймеры (setInterval, setTimeout), эти операции создают ссылки на функции, которые могут обращаться к состоянию или DOM компонента. Если компонент удаляется из дерева, но подписка или таймер не очищены, они продолжают существовать в памяти, удерживая компонент и его зависимости. Это приводит к утечкам памяти, снижению производительности и возможным ошибкам при попытке обновить состояние размонтированного компонента.

Решение в классовых компонентах

В классовых компонентах для очистки используется метод componentWillUnmount. В нём нужно удалить все подписки и остановить таймеры.

class MyComponent extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    this.timer = setInterval(this.tick, 1000);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
    clearInterval(this.timer);
  }

  handleScroll = () => { /* ... */ };
  tick = () => { /* ... */ };
}

Решение в функциональных компонентах

В функциональных компонентах используется хук useEffect. Если вернуть функцию из useEffect, она будет вызвана при размонтировании компонента (или перед повторным запуском эффекта).

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleScroll = () => { /* ... */ };
    window.addEventListener('scroll', handleScroll);
    const timer = setInterval(() => { /* ... */ }, 1000);

    return () => {
      window.removeEventListener('scroll', handleScroll);
      clearInterval(timer);
    };
  }, []); // пустой массив зависимостей — эффект выполнится один раз
}

Практические рекомендации

• Всегда очищайте подписки и таймеры при размонтировании.
• Используйте пустой массив зависимостей в useEffect, если подписка создаётся один раз.
• Если подписка зависит от пропсов или состояния, добавьте их в массив зависимостей, чтобы эффект пересоздавался при изменениях.
• Для событий, которые добавляются на элементы самого компонента (например, onClick), очистка не требуется, так как React управляет ими автоматически.

Вывод

Правильная очистка ресурсов — обязательная практика при работе с глобальными событиями и таймерами. Это предотвращает утечки памяти и делает приложение стабильным и производительным. Всегда используйте механизмы очистки, предоставляемые React, чтобы избежать неожиданного поведения.