JSX element in eventContent leads to flicker from any event-related updates

[nandorojo]

Reduced Test Case

https://stackblitz.com/edit/github-8qn74d-djfu5w?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

If I use the eventContent prop on the React component and return JSX, there is a very noticeable flicker in the following cases:

1. State update for the events prop.
2. Dragging events without a state change (as shown in the minimal reproduction)

If I simply return a string from eventContent rather than JSX, there is less of a flicker from updates.

Screen Recordings

1. Reproduction recording

First, here is a screen recording of the flickering in the minimal reproduction. When eventContent is set, dragging (without triggering React re-renders) leads to a flicker of the event. Disabling the eventContent prop fixes it.

Fullcalendar.-.Fullcalendar.Examples.forked.-.StackBlitz.-.3.April.2023.1.mp4

Since it's not super noticeable with just one event on a minimal reproduction, I will add a video of what it looks like on our actual product as well.

2. Real-life product recording

localhost_5001_dashboard_venues_uptownsocial_calendar_slots_4ae1b76c-d23e-11ed-9087-1b6a920e0638.-.3.April.2023.1.mp4

After dragging an event, I push the change to the server. Then, after the server mutation succeeds, I re-render the component with a new eventSources array. This is when the events flicker.

Similarly: when I change the time of the event from the sidebar to the right, I call the server, update the change, and then re-render the calendar with the updated events.

Interestingly, only events of the same type (as in, from the same array within eventSources) experience a flicker. Notice that the events with a green background don't flicker at all.

Context

I am using eventSources with an array for each event type, which gets updated whenever the state changes.

My eventSources looks like this:

eventSources = useMemo(() => [firstEventTypes, secondEventTypes, ...], [...])

[acerix]

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