размер / размеры элемента div наблюдателя с использованием useRef и события изменения размера окна (React Hook)

Question

Я пытаюсь постоянно наблюдать / определять размер элемента div с помощью React Hook JS. Я использовал разные способы, но каждый раз вижу общую проблему, когда уменьшение размера окна не меняет ref.current.offsetWidth но увеличивая это, изменится ref.current.offsetWidth ценность.

Вот мой код:

function Chart({}) {
    const targetRef = useRef(null);
    const [dimensions, setDimensions] = useState({width: 0, height: 0});

    const updateDimensions = debounce(() => {
        if(targetRef.current) {
            setDimensions({
                width: targetRef.current.offsetWidth,
                height: targetRef.current.offsetHeight
            });
        }
    }, 50);

    useEffect(() => {
        updateDimensions();
    }, []);

    useEffect(() => {
        window.addEventListener("resize", updateDimensions);
        updateDimensions();
        return () => {
            window.removeEventListener("resize", updateDimensions);
        };
    }, []);

    return (
        <div style={{minHeight: 250}} ref={targetRef}>
           <some svg component/>
        </div>

    );
}

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

Answer 1

Если вы хотите измерить размер определенных элементов с помощью ссылок (или даже с использованием необработанного элемента), я рекомендую эту библиотеку:https://github.com/ZeeCoder/use-resize-observer

Если вы хотите конкретно измерить размер окна, то, вероятно, лучше всего использовать что-то вроде этого: https://github.com/jaredLunde/react-hook/tree/master/packages/window-size#readme