Package Responsive: useParentSize is not updating the width and height

[Ti-tanium]

Hi, I tried using the useParentSize hook. The width and height are always 0 when I resize the parent container.

After looking at the source code, I believe we should add parentRef.current to the dependency array for this useEffect hook:

visx/packages/visx-responsive/src/hooks/useParentSize.ts

Lines 64 to 83 in 86a851c

	useEffect(() => {
	const LocalResizeObserver =
	resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;
	const observer = new LocalResizeObserver((entries) => {
	entries.forEach((entry) => {
	const { left, top, width, height } = entry?.contentRect ?? {};
	animationFrameID.current = window.requestAnimationFrame(() => {
	resize({ width, height, top, left });
	});
	});
	});
	if (parentRef.current) observer.observe(parentRef.current);
	return () => {
	window.cancelAnimationFrame(animationFrameID.current);
	observer.disconnect();
	resize.cancel();
	};
	}, [resize, resizeObserverPolyfill]);

Because the parentRef is initially null, so observer.observe(parentRef.current); is never executed, even if parentRef is set to the element after initial render.

[hshoff]

Hi @Ti-tanium could you provide a codesandbox reproducing the issue you're seeing? The useParentSize hook should be working but a lot depends on how it is used.

[hshoff]

Hi @Ti-tanium, closing this as we haven't heard back. Happy to reopen if needed.