Bug report

Current Behavior

The useSize hook in @radix-ui/react-use-size has the potential to throw ResizeObserver loop completed with undelivered notifications errors when the ResizeObserver is not able to deliver all observations within a single animation frame. This can often happen in larger applications where a lot of code is being run during a mutation.

See WICG/resize-observer#38

Expected behavior

useSize should complete without error

Reproducible example

Difficult to reproduce as it generally only happens in performance heavy applications

Suggested solution

We already solved this problem in useResizeObserver in @radix-ui/react-scroll-area where we wrap the resize observer in a requestAnimationFrame call. We should port the same logic to the the useSize hook.

See https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx#L991

We should probably extract the useResizeObserver and useDebounceCallback (used internally) to a separate package so that it can be reused in both locations.

Additional context

Your environment

I've included all radix packages that use useSize internally