Блог

Главная - Вопросы по программированию - Утечка памяти с ограничительной рамкой в React useEffect

Утечка памяти с ограничительной рамкой в React useEffect

#javascript #reactjs

#javascript #reactjs

Вопрос:

Итак, у меня есть пользовательский хук, который будет отслеживать ограничительную рамку некоторых анимированных divs, но у него есть утечка памяти, когда я добавляю свою ограничительную рамку к useEffect зависимостям, и я не могу понять, как заполнить пробел.

Смотрите Хук ниже, а также рабочий пример здесь, в codesandbox

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

const useBoundingBoxWithEventListeners = (ref) => {
  const [bbox, setBbox] = useState({});

  const set = useCallback(() => 
    setBbox(ref amp;amp; ref.current ? ref.current.getBoundingClientRect() : {}), [ref]);
  
  useEffect(() => {
    set();
    window.addEventListener('resize', set); 
    
    return () => {
      window.removeEventListener('resize', set); 
    };
  }, [ref, set, bbox]);

  return { bbox, ref };
};

export { useBoundingBoxWithEventListeners };

Комментарии:

1. Зачем вам нужен bbox массив зависимостей? Похоже, это привело бы к бесконечному циклу. Работает ли это без него? И ref если уж на то пошло?

2. если вы посмотрите пример codesandbox, вы увидите разницу при использовании или нет. Без этого svg, которые рисуются между разделениями, не будут отслеживать ссылки и отображаться должным образом. Что касается использования bbox в массиве dep, он не обязательно должен быть там, если есть другой способ заставить его работать