Как дебажить приложение и находить утечки памяти

Общий процесс дебага

Причины утечек памяти и решения

Забытые таймеры и интервалы

useEffect(() => {
  const interval = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(interval); // обязательно очищаем!
}, []);

Неудалённые обработчики событий

useEffect(() => {
  const handleScroll = () => console.log("scrolling...");
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

Замыкания, удерживающие данные

Замыкания могут "запомнить" ссылки на объекты, и те не будут удалены. Решение: использовать useRef, useCallback или вовремя очищать.

Глобальные переменные

window.myCache = largeObject; // плохая практика

// лучше явно очищать
window.myCache = null;

Ссылки в useRef и DOM

const ref = useRef(null);

useEffect(() => {
  ref.current = document.getElementById("my-element");

  return () => {
    ref.current = null; // освобождаем ссылку
  };
}, []);

WebSocket или подписки, не закрытые вовремя

useEffect(() => {
  const socket = new WebSocket("wss://example.com");
  return () => socket.close(); // обязательно закрываем
}, []);

Отсутствие виртуализации на больших списках

Рендеринг 1000+ элементов без виртуализации замедляет приложение и "забивает" память.

Решение: использовать библиотеки:

• react-window
• react-virtualized

Как найти утечки памяти

Вкладка Memory → Heap Snapshot

• Перейдите в DevTools → Memory → Take Snapshot
• Взаимодействуйте с компонентом (например, откройте/закройте модалку)
• Снимите ещё один Snapshot
• Сравните: должны исчезнуть временные объекты

Вкладка Performance → Record Allocations

• Нажмите «Start recording allocations»
• Используйте компонент
• Нажмите «Stop» и ищите утечки, которые остаются после удаления компонента

Инструменты мониторинга

• Chrome DevTools — встроенный анализатор памяти и профайлер
• Sentry, Datadog, LogRocket — обнаружение и логирование утечек и ошибок в проде
• why-did-you-render — помогает найти лишние ререндеры компонентов

Вывод

• Следите за очисткой side-effects (setInterval, event listeners, sockets)
• Используйте DevTools → Memory → Snapshot для диагностики
• Не храните глобальные объекты или замыкания, которые не очищаются
• Для больших списков — применяйте виртуализацию
• Используйте React Profiler и профилирование в браузере, чтобы находить узкие места

// Пример шаблона безопасного useEffect
useEffect(() => {
  const res = startSomething();
  return () => {
    cleanupSomething(res);
  };
}, []);