Maximum update depth exceeded error in React 18 in strict mode

[kmaic]

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!

[Dylan Ferris]

Please refer to the support page and use Stack Overflow for help. If this is a bug, please supply a runnable, stripped-down demonstration.

[Paolo Bernardini]

I have the same issue when trying to use react 18, same code with react 17 works

I've created a code sandbox that reproduce the error:

https://codesandbox.io/s/infallible-snyder-dkr1c3

just try to change month

[kmaic]

@violabg thanks for the example!

@acerix you can check the above example and also this one: https://codesandbox.io/s/different-views-forked-pdrmxq (by clicking on the month/week/day buttons in the top). Is this enough for you to help solving it?

[Dylan Ferris]

Thanks for the demo, I can confirm the error. Since it seems specific to the React component I will move to that repo.

[Marco]

Is there any workaround to avoid this issue? I'm experiencing the same behavior with React 18 in strict mode.

[fabricio]

I'm also experiencing the same problem above, it works with React 17, after upgrading to react 18 the error starts to happen again.

[Tim Rybicki]

Same issue after upgrading to react 18. Seems to work without StrictMode.

[Adam Shaw]

Fixing this bug is my next development task.

[Tommy Cutter]

A workaround (that's working for me at least) is to wrap your state update function in a setTimeout.

Example:

datesSet={() => {
    calendarRef.current &&
      setTimeout(() => {
        setCurrentMonth(calendarRef.current.getApi().getDate().toString());
    }, 50);
}}

[Greg Haddow]

Same issue - enabled strict mode on React 18, had to disable strict mode again

[agiangrant]

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

[Adam Shaw]

This has been fixed in v5.11.2

Updated demo: https://codesandbox.io/s/different-views-forked-w7i7iu?file=/src/App.js

@agiangrant, thank you so much for the PR. I ultimately implemented my own solution using existing utilities, but your PR guided me perfectly to the correct solution. Thanks!

[Tim Rybicki]

Thanks @arshaw!

[Janis Basis Basovs]

Yes - can confirm that upgrading fullcalendar to v.5.11.2 helped.

Howerver i couldnt do it with npm so i converted to yarn. Maybe thats something specific with my other dependencies.