-
-
Notifications
You must be signed in to change notification settings - Fork 445
Open
Labels
bugSomething isn't workingSomething isn't working
Description
Describe the bug
useResizeObserver when component dom remove and rerender ( like dialog ), size not refresh
To Reproduce
windows chrome
Expected behavior
when useResizeObserver ref dom remove and while readd to document need update size.
or export creatResizeObserver and destroyResizeObserver function give to developer to control.
like below:
function useResizeObserver(options) {
const { ref, box = "content-box" } = options;
const [{ width, height }, setSize] = useState(initialSize);
const isMounted = useIsMounted();
const previousSize = useRef({ ...initialSize });
const onResize = useRef(void 0);
onResize.current = options.onResize;
const observerRef = useRef(null)
const createResizeObserver = useCallback(() => {
if (!ref.current)
return;
if (typeof window === "undefined" || !("ResizeObserver" in window))
return;
observerRef.current = new ResizeObserver(([entry]) => {
const boxProp = box === "border-box" ? "borderBoxSize" : box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize";
const newWidth = extractSize(entry, boxProp, "inlineSize");
const newHeight = extractSize(entry, boxProp, "blockSize");
const hasChanged = previousSize.current.width !== newWidth || previousSize.current.height !== newHeight;
if (hasChanged) {
const newSize = { width: newWidth, height: newHeight };
previousSize.current.width = newWidth;
previousSize.current.height = newHeight;
if (onResize.current) {
onResize.current(newSize);
} else {
if (isMounted()) {
setSize(newSize);
}
}
}
});
observerRef.current.observe(ref.current, { box });
}, [isMounted, observerRef, box, ref])
const destroyResizeObserver = useCallback(() => {
if (observerRef.current) {
observerRef.current.disconnect();
previousSize.current = initialSize;
observerRef.current = null;
}
}, [observerRef])
useEffect(() => {
createResizeObserver()
return () => {
destroyResizeObserver()
}
}, [box, ref, isMounted]);
return { width, height, createResizeObserver, destroyResizeObserver }; // Notice: here add createResizeObserver, destroyResizeObserver
}
Additional context
No response
zakwear and JanChodorowski
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working
Projects
Milestone
Relationships
Development
Select code repository
Activity
[-][BUG] useResizeObserver when component dom remove and rerender ( like dialog ), size not refresh[/-][+][BUG] useResizeObserver when component dom remove and rerender ( like dialog ), size not update[/+]farzadsoltani commentedon Oct 24, 2024
Did you figure out a fix for this?
hxdyj commentedon Oct 24, 2024
@farzadsoltani I am patch package by below diff, add destroyResizeObserver function to control.
thejasonxie commentedon Dec 3, 2024
Easiest solution I found :
modify this line by using ref?.current.
it starts working after user clicks on the dialog which is okay in my case. I'm using shadcn dialog.
addlistener commentedon Mar 4, 2025
I'm using this
https://ahooks.js.org/hooks/use-size/
---The below is still buggy---
or more easily, without patching the original package, create a ref object manually.