Как замыкание влияет на память?

Замыкания и управление памятью

Замыкание (closure) — это функция, которая имеет доступ к переменным из своей области видимости, даже после того, как эта область завершила своё выполнение. Это мощная возможность JavaScript, но неправильное использование может привести к утечкам памяти.

Как замыкание влияет на память

Проблема: утечка памяти через замыкания

Когда функция создаёт замыкание, она сохраняет ссылки на все переменные из внешней области видимости. Если замыкание существует долгое время, эти переменные не будут удалены сборщиком мусора.

// Пример утечки памяти через замыкание
function createLeak() {
  const largeArray = new Array(1000000).fill("данные");
  
  return function() {
    console.log(largeArray.length); // замыкание удерживает largeArray в памяти
  };
}

const leakFunction = createLeak();

// largeArray не будет удалена, даже если нам больше не нужна сам массив
// Память будет удерживаться столько, сколько существует leakFunction

Почему это происходит? JavaScript движок не может знать, какие переменные нужны замыканию, поэтому он сохраняет все переменные из области видимости. Если замыкание нужно только переменную x, но в области есть largeArray, оба будут удерживаться в памяти.

Проблема в React

Замыкания особенно критичны в React, где компоненты переиспользуются.

Проблема: неправильное использование useCallback

export function UserList({ users }) {
  // Неправильно: largeArray удерживается в памяти для каждого рендера
  const largeArray = new Array(1000000).fill("данные");
  
  const handleClick = useCallback((userId) => {
    console.log(largeArray); // замыкание удерживает largeArray
    console.log(userId);
  }, []); // [] — зависимостей нет!
  
  return (
    <div>
      {users.map(user => (
        <button key={user.id} onClick={() => handleClick(user.id)}>
          {user.name}
        </button>
      ))}
    </div>
  );
}

Даже если компонент перемонтируется, замыкание будет удерживать старый largeArray.

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

1. Event listeners с замыканиями

// Неправильно: утечка памяти
export function useWindowResize() {
  const largeData = new Array(1000000).fill("данные");
  
  useEffect(() => {
    const handleResize = () => {
      console.log(largeData.length); // замыкание
    };
    
    window.addEventListener("resize", handleResize);
    
    // Забыли удалить listener!
    // return () => window.removeEventListener("resize", handleResize);
  }, []);
}

// Правильно: очищаем listener
export function useWindowResize() {
  useEffect(() => {
    const handleResize = () => {
      console.log("resized");
    };
    
    window.addEventListener("resize", handleResize);
    
    return () => {
      window.removeEventListener("resize", handleResize); // cleanup
    };
  }, []);
}

2. Таймеры с замыканиями

// Неправильно
function startTimer() {
  const largeData = { /* большой объект */ };
  
  const interval = setInterval(() => {
    console.log(largeData); // замыкание удерживает largeData вечно
  }, 1000);
}

// Правильно: очищаем таймер
function useTimer() {
  useEffect(() => {
    const interval = setInterval(() => {
      console.log("tick");
    }, 1000);
    
    return () => clearInterval(interval); // cleanup
  }, []);
}

3. Глобальные переменные и замыкания

// Глобальное замыкание — утечка памяти в масштабе приложения
const handlers = [];

function registerHandler() {
  const userData = { id: 1, name: "User", largeData: [...] };
  
  handlers.push(() => {
    console.log(userData); // замыкание удерживает userData
  });
}

// userData никогда не будет удалена, даже если пользователь вышел
// Память будет расти с каждым новым пользователем

Как оптимизировать работу с памятью

1. Ограничивай область видимости

// Плохо: замыкание захватывает весь объект user
const user = { id: 1, name: "John", largeData: [...] };
const handler = () => console.log(user.name);

// Хорошо: захватываем только нужное значение
const user = { id: 1, name: "John", largeData: [...] };
const userName = user.name;
const handler = () => console.log(userName);

2. Явно обнуляй ссылки

class DataManager {
  constructor() {
    this.data = new Array(1000000).fill("данные");
  }
  
  cleanup() {
    this.data = null; // явно удаляем ссылку
  }
}

const manager = new DataManager();
// используем manager
manager.cleanup(); // очищаем память перед удалением

3. Используй WeakMap для кэшей с замыканиями

// Обычный Map удерживает ссылки
const cache = new Map();

function memoize(fn) {
  return (obj) => {
    if (cache.has(obj)) return cache.get(obj);
    const result = fn(obj);
    cache.set(obj, result); // obj удерживается в памяти вечно
    return result;
  };
}

// WeakMap позволяет объектам быть удалены
const weakCache = new WeakMap();

function memoizeWeak(fn) {
  return (obj) => {
    if (weakCache.has(obj)) return weakCache.get(obj);
    const result = fn(obj);
    weakCache.set(obj, result); // obj может быть удалён при отсутствии других ссылок
    return result;
  };
}

4. Правильно используй зависимости в React

// Плохо: пересоздаём callback каждый рендер
export function DataDisplay({ data }) {
  const handleClick = () => { // новая функция каждый раз
    console.log(data);
  };
  
  return <button onClick={handleClick}>Click</button>;
}

// Хорошо: используем useCallback с правильными зависимостями
export function DataDisplay({ data }) {
  const handleClick = useCallback(() => {
    console.log(data);
  }, [data]); // зависимость отслеживается
  
  return <button onClick={handleClick}>Click</button>;
}

Инструменты для диагностики

Chrome DevTools - Memory профилирование

// 1. Открыть DevTools
// 2. Перейти на вкладку Memory
// 3. Нажать Record allocation timeline или Take heap snapshot
// 4. Выполнить операции, которые подозреваешь на утечку
// 5. Взять ещё один snapshot
// 6. Сравнить snapshots и найти объекты, которые не удалились

Проверка через консоль

// Уменьшить контекст замыкания
function getHandler() {
  const smallVar = 1;
  const hugeObject = new Array(1000000);
  
  // Только smallVar будет захвачен, если hugeObject не используется
  return () => smallVar;
}

Лучшие практики

1. Очищай listeners и таймеры в cleanup функциях
2. Избегай глобальных переменных с замыканиями
3. Используй WeakMap для кэшей
4. Ограничивай область видимости — только нужные переменные
5. Профилируй память — используй Chrome DevTools
6. Избегай циклических ссылок — они блокируют garbage collector
7. Null-проверки в cleanup функциях

Заключение

Замыкания — это фундаментальная часть JavaScript, но они требуют осторожности при работе с памятью. Правильное управление жизненным циклом замыканий, особенно в React приложениях, критично для предотвращения утечек памяти и обеспечения оптимальной производительности.