Events disappear when reference to events array changes

[scriptify]

Reduced Test Case

https://codesandbox.io/p/sandbox/happy-visvesvaraya-kpkkxh?file=%2Fsrc%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

Hello!

So I've been hunting down this bug for quite some time now, and I think I stumbled upon the root cause.

Initial situation

In our case, the Calendar is used in a React App that leverages react-query for fetching data from an API that returns events.
Those events mostly have an RRule defined.

Every time the user changes the date, an API request is issued, and the events within the date range are returned.

The problem

On the first render (so the default date range), the events are displayed correctly. But as soon as the date range changes, and thus the events are updated, the rendering becomes buggy: Repeating events are not shown anymore, the calendar is empty.

Reproducing it

In the codesandbox I provided, the bug can be reproduced by changing the date range.
The example doesn't make use of any external library and just simulates the creation of a new events array upon date range change.
After changing the date range, the calendar becomes blank.
I also discovered, that this is only the case for events with an RRule.
The event with the title no-rrule is correctly rendered, as you can see in the example when navigating to the next week.

My interpreation

It seems that the problem is caused when the reference to the events array changes. When provided statically, this problem doesn't occur.

Temporary fix

I also tried to find a temporary fix, by just re-mounting the calendar when the event change, but this is less than ideal.

To try out the version with the fix applied, in the file DemoApp.jsx set the constant SHOULD_APPLY_WORKAROUND to true, and the events are displayed correctly.

Am I missing something very obvious here?
Should I use the non-declarative way of data fetching (data sources)?

I hope I was able to clearly state the problem.
Thanks for helping out!

Fullcalendar is great.

[jianhao2010303]

just re-mounting the calendar ： The consumption is too large, which is not a good solution for me。

The phenomenon you described is the same as what I saw。

[scriptify]

just re-mounting the calendar ： The consumption is too large, which is not a good solution for me。

The phenomenon you described is the same as what I saw。

Yea re-mounting is a bad solution, also the whole UI state is lost when re-mounting.
But it's the only way I found to make it work. We could try using event sources and let FC handle the state internally. I didn't want to go that route because that defeats the whole purpose IMO.

[jianhao2010303]

I tried to load data using FN, but found that the FN method would trigger many times, which undoubtedly put a lot of pressure on back-end services.

[acerix]

I believe this existing ticket captures this need:
#7230
↑
Please visit the above issue, give a 👍 to vote (?), press the 🔈Subscribe button to receive updates.