Firing calendarApi inside useEffect could cause 'flushSync was called from inside a lifecycle method'

[eiji03aero]

Reduced Test Case

https://stackblitz.com/edit/github-bv3xxu-3q3ump?file=src%2FDemoApp.jsx

Do you understand that if a reduced test case is not provided, we will intentionally delay triaging of your ticket?

• I understand

Which connector are you using (React/Angular/etc)?

React

Bug Description

General

Using packages with version 6.1.8.
It seems to be when calendarApi like gotoDate or batchRendering is called inside React.useEffect, it crashes the page by causing an error flushSync was called from inside a lifecycle method.
You can reproduce this by clicking the either of prev date or next date button in sidebar of my reduced test case.

I though this could be solved by using 6.1.8 as I found a similar issue like this one (#7334), but it did not help.
It seems to be there are other problem in working with React.

About the reduced test case

I have tried to reproduce my project's implementation as much as possible, though there are codes that seem to be odd.
Points of this implementation would be:

• Which dates to show is programatically controlled by React.useEffect and calendarApi.gotoDate
  • This is required because we want to manage the date value in parent component so that I can share it.
• Events are extracted as state value
  • This is also required, because we needed to separate the events data and what is actually shown on fullcalendar.

Expectation

Calling calendar apis inside React.useEffect without crashing the page.

Misc

• If you have any question, please feel free to ask 🙇
• Any help would be appreciated.

[kaliseo]

Same error here. Is there any workaroud ?

[MSDOStoevsky]

This seems to be directly related to the issue they attempted to fix in 6.1.8. If you set your eventContent={undefined} then you can page as normal

[eiji03aero]

@acerix @arshaw
I'm sure you guys must be busy with other work, but can I ask you the estimation of when you guys can start working on this and this will be fixed?
My team is basically waiting for this fix so that we can release a new feature ...

[arshaw]

@eiji03aero , I'm doing a bugfix release this week and I'll investigate the root cause of this

[eiji03aero]

@arshaw
Hello.
Thanks for the reply and telling about the plan!
I'm looking forward to the release 🙇

[arshaw]

I fixed has been release in v6.1.9

This completely fixes the problem for React 16 (what @eiji03aero) is using and 17.

However, in React 18 or higher, people still might see a (non-fatal) warning.

In order to completely fix this, we'll need to refactor the way the connector system works with custom-content injection, which is planned for v7.

[eiji03aero]

@arshaw
Had some checking on my local, and confirmed the fix.
Thank you so much 🙇

[arshaw]

Thanks @eiji03aero I will leave this ticket open until it is properly fixed in v7

[Gatix]

We're having the same issue using React 18. What version is this bug introduced? So we can downgrade in the meantime

[arshaw]

@Gatix, are you seeing a warning or a fatal error?

[Gatix]

@Gatix, are you seeing a warning or a fatal error?

My bad it's just a bug in our code where I was quick to blame the library, just a warning on our end..

[pawelgrimm]

I also ran into this warning on React 18 while trying to call CalendarApi.setOption in a useEffect. As a workaround, I wrapped the calls in queueMicrotask:

useEffect(() => {
	queueMicrotask(() => {
		calendar.setOption(/* ... */)
	})
}, [])

[flo5324]

I also ran into this warning on React 18 while trying to call CalendarApi.setOption in a useEffect. As a workaround, I wrapped the calls in queueMicrotask:

useEffect(() => {
	queueMicrotask(() => {
		calendar.setOption(/* ... */)
	})
}, [])

Nice workaround
I had trouble finding where this error came from and it was indeed an CalendarAPI call in a useEffect

[domipieg]

Is there some future plan to get rid of this warning as well without the need of using workarounds?