Maximum update depth exceeded error in React 18 in strict mode

Reduced Test Case

“not reproducible with a link”

Bug Description

Using version fullcalendar v5.11.0 and react v18.0.0, and react strict mode.

While using a view like in https://berrydashboard.io/app/calendar, with month, week, day grids and week list view, the error can be seen when:

• changing views
• on page reload

The same error happens when using only a single view ex: “dayGridMonth” when the page reload is performed.

The same view was working with fullcalendar v5.10.1 and react v17.0.2, and react strict mode.

Screenshots

react-dom.development.js?ac89:27084 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. at checkForNestedUpdates (react-dom.development.js?ac89:27084:1) at scheduleUpdateOnFiber (react-dom.development.js?ac89:25266:1) at Object.enqueueSetState (react-dom.development.js?ac89:13234:1) at SimpleScrollGrid.Component.setState (react.development.js?1b7e:354:1) at SimpleScrollGrid._this.handleSizing (main.js?55c4:9089:19) at SimpleScrollGrid.componentDidUpdate (main.js?55c4:9183:14) at commitLayoutEffectOnFiber (react-dom.development.js?ac89:23146:1) at commitLayoutMountEffects_complete (react-dom.development.js?ac89:24461:1) at commitLayoutEffects_begin (react-dom.development.js?ac89:24447:1) at commitLayoutEffects (react-dom.development.js?ac89:24385:1) at commitRootImpl (react-dom.development.js?ac89:26651:1) at commitRoot (react-dom.development.js?ac89:26517:1) at performSyncWorkOnRoot (react-dom.development.js?ac89:25956:1) at flushSyncCallbacks (react-dom.development.js?ac89:11982:1) at eval (react-dom.development.js?ac89:25490:1)

The above error occurred in the component:

at SimpleScrollGrid (webpack-internal:///./node_modules/@fullcalendar/common/main.js:9741:47) at div at MountHook (webpack-internal:///./node_modules/@fullcalendar/common/main.js:5896:47) at ViewRoot (webpack-internal:///./node_modules/@fullcalendar/common/main.js:5954:47) at DayTimeColsView (webpack-internal:///./node_modules/@fullcalendar/timegrid/main.js:1607:47) at div at ViewContainer (webpack-internal:///./node_modules/@fullcalendar/common/main.js:8346:47) at CalendarContent (webpack-internal:///./node_modules/@fullcalendar/common/main.js:8489:47) at div at CalendarRoot (webpack-internal:///./node_modules/@fullcalendar/common/main.js:8670:47) at CalendarDataProvider (webpack-internal:///./node_modules/@fullcalendar/common/main.js:7856:28) at FullCalendar (webpack-internal:///./node_modules/@fullcalendar/react/dist/main.js:16:47)` Can you help me with this error pleas?

Thanks in advance!

[arshaw]

Fixing this bug is my next development task.

[agiangrant]

PR has been opened for this issue https://github.com/fullcalendar/fullcalendar/pull/6917. Hoping for a quick review since these changes are very minor. I was also experiencing this issue consistently.