Open Pearce-Ropion opened 1 year ago
Same issue
@Pearce-Ropion did you figure this out? :smiley:
@Pearce-Ropion did you figure this out? 😃
As a workaround, we added the following to our webpack dev-server config:
const webpackDevServerConfig = {
client: {
overlay: {
runtimeErrors: error => {
/**
* This is a benign and seemingly impossible error to avoid, and it
* appears sporadically.
*/
if (error.message === 'ResizeObserver loop limit exceeded') {
return false;
}
/**
* Resize Observer will often throw this benign error which indicates
* that ResizeObserver was not able to deliver all observations within
* a single animation frame. In these cases, we should wrap our resize
* observer callback in a `requestAnimationFrame` to ensure we don't
* deliver unnecessary observations. However, we can't account for all
* ResizeObserver usage in other libraries.
* @see https://github.com/WICG/resize-observer/issues/38
*/
if (
error.message ===
'ResizeObserver loop completed with undelivered notifications.'
) {
return false;
}
return true;
},
},
},
};
Bug report
Current Behavior
The
useSize
hook in@radix-ui/react-use-size
has the potential to throwResizeObserver loop completed with undelivered notifications
errors when theResizeObserver
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 https://github.com/WICG/resize-observer/issues/38
Expected behavior
useSize
should complete without errorReproducible 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 arequestAnimationFrame
call. We should port the same logic to the theuseSize
hook.See https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx#L991
We should probably extract the
useResizeObserver
anduseDebounceCallback
(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