ResizeObserver loop error in react error overlay in dev mode

[cmdcolin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

This requires cloning and running in dev mode to reproduce, production mode doesn't have the error overlay
https://github.com/cmdcolin/x-data-grid-resizeobserver-loop-error

Steps:

1. Clone the repo https://github.com/cmdcolin/x-data-grid-resizeobserver-loop-error
2. Run yarn
3. Run yarn start
4. Add another row of "<DataGrid>" to the component

This only affects the very latest version of @mui/x-data-grid 6.2.1 with the ResizeObserver change

Note: in my larger project, I get this error without modifying source code, but this was the simplest way I found to reproduce the issue in a smaller project e.g. to add another datagrid to the page was the best way to reproduce it in this small example

Current behavior 😯

Creates a react-error-overlay saying "ResizeObserver loop limit exceeded"

This is a dev mode only phenomenon to create the large overlay

Expected behavior 🤔

It would be nice if there was no error from this. There may be workarounds such as this stackoverflow answer suggests https://stackoverflow.com/a/58701523/2129219, but there are tradeoffs to using that potentially, so might be worth considering alternative solutions

Noted by another user here #8091 (comment)

Context 🔦

I am using @mui/x-data-grid in dev mode in a create-react-app v5 instance, and it has these error overlays when a global error occurs

We could maybe configure our create-react-app config to ignore this error in dev mode, but we ship a library that uses x-data-grid and it is difficult to tell people to use a particular create-react-app v5 config for example

Your environment 🌎

Unable to complete the npx @mui/envinfo, but the yarn.lock in the linked repo should be reproducible

Chromium Version 112.0.5615.49 (Official Build) snap (64-bit)
Firefox Nightly 114.0a1 (2023-04-23) (64-bit)

Order ID or Support key 💳 (optional)

No response

[drewscott16]

I am also seeing this issue using @mui/x-data-grid-pro in dev mode.

[m4theushw]

I opened #8744 with a fix from the StackOverflow thread. I don't like this workaround but the alternative would be to revert the change, returning to the legacy method of getting dimensions. Could you check if the error is gone now? You can use the packages from https://ci.codesandbox.io/status/mui/mui-x/pr/8744/builds/371270. See https://github.com/mui/material-ui/blob/master/CONTRIBUTING.md#how-can-i-use-a-change-that-wasnt-released-yet for how to use the package from CodeSandbox.

[SanNic20]

@m4theushw : For information : same thing with [Masonry] component from material-ui #36909

[cmdcolin]

@m4theushw adding this build made the error go away

[cmdcolin]

not sure if it is relevant but in a project i had that uses ResizeObserver, I call a useState setter in the ResizeObserver's callback and didn't get this loop error. that is one possible alternative to the requestAnimationFrame, but the requestAnimationFrame may be ok too

[m4theushw]

@cmdcolin We do the same. Our ResizeObserver callback also updates a state.

mui-x/packages/grid/x-data-grid/src/components/base/GridBody.tsx

Lines 90 to 92 in a4454b2

	const observer = new ResizeObserver(() => {
	apiRef.current.computeSizeAndPublishResizeEvent();
	});

mui-x/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts

Lines 243 to 244 in a4454b2

	const size = { width: newWidth, height: newHeight };
	apiRef.current.publishEvent('resize', size);

mui-x/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts

Line 311 in a4454b2

debouncedSetSavedSize(size);