From 71a14b968d73f718c52c470e0c0f8dade3bbc433 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Wed, 15 Mar 2023 09:03:54 +1100 Subject: [PATCH] Fix useResizeObserver timing --- packages/@react-aria/utils/src/useResizeObserver.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/@react-aria/utils/src/useResizeObserver.ts b/packages/@react-aria/utils/src/useResizeObserver.ts index e2cb9530ec2..318d6e05399 100644 --- a/packages/@react-aria/utils/src/useResizeObserver.ts +++ b/packages/@react-aria/utils/src/useResizeObserver.ts @@ -11,7 +11,7 @@ type useResizeObserverOptionsType = { export function useResizeObserver(options: useResizeObserverOptionsType) { const {ref, onResize} = options; - let raf = useRef(null); + let raf = useRef(null); useEffect(() => { let element = ref?.current; @@ -26,18 +26,16 @@ export function useResizeObserver(options: useResizeObserverO }; } else { const resizeObserverInstance = new window.ResizeObserver((entries) => { - if (raf.current) { + if (raf.current || !Array.isArray(entries) || !entries.length) { return; } // avoid Error - ResizeObserver loop limit exceeded // it's ok to use a raf, ResizeObservers are already async and now we're just debouncing on frames raf.current = window.requestAnimationFrame(() => { raf.current = null; - if (!Array.isArray(entries) || !entries.length) { - return; - } - onResize(); }); + // call onResize immediately + onResize(); }); resizeObserverInstance.observe(element);