Event content flickers when dropping an event because eventContent fires twice

[Berger1994]

Reduced Test Case

https://codesandbox.io/s/busy-faraday-fnlbfr?file=/src/App.js

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

The eventContent function is executed twice on dragging. The first execution is with the initial time and the second one is the current dragging time. This causes small but ugly ui flickering.

In the example, you can check the log in the console. If you drag or resize the event, you can see 2 lines of logging.
I started with an event at 3:00 and resize the start to 2:30, then to 2:00. The logging is the following:

render 3:00
render 2:30
render 3:00
render 2:30
render 3:00
render 2:00
render 3:00
render 2:00

In my opinion, the logging should be something like this:

render 3:00
render 3:00
render 2:30
render 2:30
render 2:00
render 2:00

Maybe only once, but this is not the problem of the flickering.

[mohux]

Screen.Recording.2023-02-02.at.1.36.20.PM.mov

it happens on select mirror as well, not sure if it happens on editable

only when you pass eventContent

[nandorojo]

I’m getting similar issues, it always flickers when I use eventContent with JSX

[frankhock]

Somewhat related, I'm experiencing a similar flicker when updating eventSources prop asynchronously.

[semyonn-7pace]

Also with JSX in eventContent blinking happens with whole event, not only with content inside it

[marcoancona]

Experiencing the same, and not only with eventContent but also with other components. For example, passing a dayHeaderContent seems to cause the header to flicker every time the view is moved forward/backwards. This seems to happen only with the combination React 18 + FullCalendar v6. The same is not happening with FullCalendar v5.

[arshaw]

This should be significantly improved in v6.1.7

The flicker during dragging/resizing/selecting should no longer exist. There still might be a slight flicker right at the end of the interaction, but it probably won't be very noticeable. This can only possibly be fixed in the next major version.

Please let me know if things look better.

Additionally, eventContent and the other content-injection hooks are called less often during drag. @Berger1994, this is the problem you pointed out. Please see this updated repro: https://stackblitz.com/edit/github-na3gnr?file=src%2FDemoApp.jsx,src%2Findex.css,package.json

[nandorojo]

Thanks so much @arshaw. I downgraded to v5 due to flickers and #7284, but I’ll definitely upgrade again to try it out once that one is fixed. If I manage to make a reproduction outside of my app for the Next.js issue, I’ll send it there. Appreciate your quick help here.

[Warziik]

Thank you, much appreciated, great work!

[nandorojo]

Did this get fixed for you guys?

[Warziik]

Did this get fixed for you guys?

Yes, no problem anymore with the blinking issue when selecting on the calendar