ResizeObserver loop limit exceeded

[RMacfarlane]

Describe the bug

This doesn't seem to be impacting functional behavior, but is generating error noise. A "ResizeObserver loop limit exceeded" is fired on the window when resizing the window.

To Reproduce

Using this code base and google chrome > 64:

1. Add

window.addEventListener('error', (e) => {
  // eslint-disable-next-line no-console
  console.log(e)
})

on

react-data-grid/src/hooks/useGridDimensions.ts

Line 3 in ec28058

2. Run npm start
3. Maximize the browser window and then resize it to be smaller on the common features example
4. Looking at the dev tools, ResizeObserver loop limit exceeded is logged repeatedly

Expected behavior

No window errors are generated

Environment

• react-data-grid version: latest
• react/react-dom version: ^17.0.2

Additional context

There's a good write up of this issue here and more discussion here

The most common approach to preventing this error from being fired seems to be to use requestAnimationFrame

[soichih]

I am having the same problem, and I confirm that the #2933 fixes it.

[ofirelias]

I'm having the same issue, has anyone found an elegant fix for this?

[amanmahajan7]

Duplicate issue #3314