fullcalendar / fullcalendar-react

The official React Component for FullCalendar

Home Page:https://fullcalendar.io/docs/react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CalendarContent crashes when suspended in concurrent mode

felixh10r opened this issue · comments

Reduced Test Case

https://codesandbox.io/s/magical-scott-czevpv

Bug Description

I'm not 100% sure what exactly causes the behavior, but in React 18 concurrent mode, unregisterInteractiveComponent get called twice. The second time it's called, this.interactionsStore[component.uid] has already been deleted and undefined can't be iterated, throwing

react_devtools_backend.js:3973 TypeError: Cannot read properties of undefined (reading 'length')
    at Object.CalendarContent._this.unregisterInteractiveComponent (CalendarContent.tsx:235:1)
    at Table._this.handleRootEl (Table.tsx:158:1)
    at safelyDetachRef (react-dom.development.js:22743:1)
    at commitUnmount (react-dom.development.js:23564:1)
    at commitNestedUnmounts (react-dom.development.js:23603:1)
    at unmountHostComponents (react-dom.development.js:23926:1)
    at commitDeletion (react-dom.development.js:23991:1)
    at commitMutationEffects_begin (react-dom.development.js:24203:1)
    at commitMutationEffects (react-dom.development.js:24187:1)
    at commitRootImpl (react-dom.development.js:26638:1) '\n    at ErrorBoundary (http://localhost:3000/static/js/bundle.js:87078:43)\n    at ErrorBoundary (http://localhost:3000/static/js/bundle.js:6394:5)\n    at DndProvider (http://localhost:3000/static/js/bundle.js:185428:5)\n    at Suspense\n    at Provider (http://localhost:3000/static/js/bundle.js:155627:5)\n    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:69085:70)\n    at ThemeProvider (http://localhost:3000/static/js/bundle.js:67921:5)\n    at ThemeProvider (http://localhost:3000/static/js/bundle.js:69105:5)\n    at StyledEngineProvider (http://localhost:3000/static/js/bundle.js:68110:5)\n    at App\n    at Suspense'

the stacks of the two calls of unregisterInteractiveComponent are:

Screen Shot 2022-04-04 at 19 50 54

My naïve approach would be to just guard this.interactionsStore[component.uid] against being undefined. I'd be happy to submit a PR if desired.

thanks @felixh10r , I'll try to resolve this by end of week

This is fixed in v5.11.0 (please upgrade all fullcalendar-related packages)

Updated repro:
https://codesandbox.io/s/new-https-qkyc9m

I never figured out WHY react 18 was double-firing the element ref callbacks with null in async mode, but I'm guarding against it now