ResizeObserver loop limit exceeded

[MYKEU]

Has anyone seen this error before on Chrome: ResizeObserver loop limit exceeded?

As far as I am aware, it is nothing to worry about - but I am just curious in case I am missing something that is rather obvious.

[alexreardon]

We don't use a resize observer in this library

[alexreardon]

Hi there!

Can you please create a standalone example on codesandbox.io using our boilerplate: https://codesandbox.io/s/k260nyxq9v

Without a standalone example, we will not be able to action this one

Cheers!

[Lukavyi]

Got the same error

[shennan]

Also getting the same error - don't have time to recreate in sandbox currently but can confirm that it is not due to any extensions.

For me, this happens in both Chrome and Firefox but not Safari.

This accepted Stack Overflow answer seems to think the error is dismissible. What is strange is that it is handled by the DND library...

[alexreardon]

Can you please paste the errorevent.error and paste the text?

[shennan]

ErrorEvent.error = null

Tried to serialise the whole error object but it's pretty hard from the console. Here's a snap:

[shennan]

These details may or may not be relevant, but here's a little more info on when this happens:

• the error is thrown when I click a specific element outside of the DragDropContext
• the interaction is setup with an addEventListener outside of the mounted React component
• the interaction does not cause any changes in state, unlike other vanilla interactions on the page that don't throw the error

[Lukavyi]

It happens when I'm resizing a container outside of react-beautiful-dnd for me

[shennan]

Ah! Yes, when I click it executes a module that uses the simplebar which must do some resizing in order to work. If I remove that library the error no longer happens.

Question is, why does DND handle the error?

[alexreardon]

react-beautiful-dnd will not capture / print these errors in 12.0

On Fri, Oct 25, 2019 at 8:10 PM shennan [email protected] wrote:

Ah! Yes, when I click it executes a module that uses the simple-bar https://github.com/Grsmto/simplebar which must do some resizing in order to work. If I remove that library the error no longer happens.

Question is, why does DND handle the error?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/atlassian/react-beautiful-dnd/issues/1548?email_source=notifications&email_token=AAQU33P32RN55KLDYYK5IQ3QQKZXPA5CNFSM4JC26I72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECHXIDA#issuecomment-546272268, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAQU33NBXTDEINJELJVTSZLQQKZXPANCNFSM4JC26I7Q .

[shennan]

Ok.

Something to be aware of, though: the error doesn't throw if I'm not implementing the DND library. Same goes for the simplebar library. Together they throw, separately they don't. Happy to ignore for now though. The error appears to be harmless.

[alexreardon]

That is interesting. We are not using resize observer at all so I think rbd might be doing something which triggers their resize observer to be hit...

[casey-speer]

Hi, I'm still seeing this happening in 13.0.0. It's likely due to some other library that uses ResizeObserver interacting with react-beautiful-dnd, but when these errors occur, it's breaking drag and drop behavior for me. The error gets logged to the console and the drag operation fails. Is it possible to catch these errors in such a way that the drag is preserved?

[thomaszdxsn]

@casey-speer same as you.

Anyone known any workarounds?

[wurambo]

@casey-speer @thomaszdxsn I've run into this issue also. Using 13.0.0 and if we encounter the ResizeObserver loop error drag and drop operations fail. Have ya'll found a solution?

@alexreardon I am able to reproduce this bug by forcing an element to constantly resize. Elements are no longer draggable https://codesandbox.io/s/vertical-list-forked-8sqqf

[thomaszdxsn]

I make a workaround: window.ResizeObserver = undefined;

But just for me case, i don't really use ResizeObserver.

[sputh]

Another workaround is to use requestAnimationFrame or debounce in your resize observer callback to prevent the loop from exceeding in the first place.

https://codesandbox.io/s/vertical-list-forked-fpwig?file=/index.js:1347-1368

If you're using the hooks version:

import useResizeObserver from 'use-resize-observer/polyfilled';
import * as React from 'react';

const [width, setWidth] = React.useState();
const resizeCallback = ({ width }) => {
  window.requestAnimationFrame(
    () => {
	  console.log("I'll only run after a paint");
	  setWidth(width);
    },
  }
);
const { ref } = useResizeObserver({ onResize: resizeCallback });

for debounce:

import * as debounce from 'lodash/debouce';
import useResizeObserver from 'use-resize-observer/polyfilled';

const [width, setWidth] = React.useState();
const resizeCallback = debounce(
  (width) => {
    console.log("I'll only run 250ms after the body has finished resizing");
	setWidth(width);

  },
  250,
);
const { ref, width } = useResizeObserver({ onResize: resizeCallback });

[chandlerprall]

In case it helps someone else find a resolution, we discovered an instance of this where re-creating a ref method every render was accidentally causing a large number of resize observers to be created during a drag operation, triggering the loop limit error.

<ResizeObserver onResize={callback}>
  {(resizeRef) => (
    <div ref={ref => { resizeRef(ref); otherRefUse(ref); }}>
      ...
    </div>
  )}
</ResizeObserver>

Every render pass, resizeRef would be called with null and destroying the observer before it is passed the 'new' ref, creating a new observer. The fix was refactoring in a way we could pass a static function as the div's ref