Performance Issue with DnD and onSelectEvent

[dbuchet]

Do you want to request a feature or report a bug?

Performance issue

What's the current behavior?

Hi there.
I've just updated from 0.19.2 to 0.20.2 and I have a performance issue when using onSelectEvent with DnD activated

No problem with 0.19.2 (i'm using the same code) or if set event draggable to false.
So I assume there is a leak when detecting click event vs startDrag / endDrag

I've launched DnD example and added an onSelectEvent with a console.log, and I have 1.5s delay before the console.log is triggered, so I assume it's not from my code :)

Thanks !

[jquense]

We may have addressed this partly in a recent PR, can you try and use the current master and see if it still occurs? If so there could definately be some performance low hanging fruit to be picked, we switched from react-dnd which is pretty tuned and optimized (but not a great solution for us) to something more custom so we haven't had a chance to stress test it in lots of different places. More than happy to take PR's on this front as well if you're up for it

[dbuchet]

Hello jquense,
Yes I've tried with current master branch, and even if it's a bit faster, I still have 1s~1.5s delay when I select an event.

I'll look if I found something!

[RusinovAnton]

I have problems with performance using dnd and onSelectEvent too
Here is results of React Profiler

[RusinovAnton]

Commenting these two lines from addons/dragAndDrop/EventWrapper.js makes it work much faster but breaks the drag n drop obviously.

https://github.com/intljusticemission/react-big-calendar/blob/master/src/addons/dragAndDrop/EventWrapper.js#L125-L126

[bs85]

Might be fixed by #1118

[dbuchet]

Thanks, i'll check when your PR is merged

[RusinovAnton]

It is a bit better but still there is a visible lag on drag start:

[bs85]

There are still a bunch of setState calls in there, can you see where they are originating from?

[amazingmarvin]

Possibly this is the same issue I was having. componentDidUpdate calls TimeGrid.measureGutter which calls setState and it repeats forever. See this commit for fix. After that it felt much snappier. I suspect some of my custom styling is giving the gutter a different width than state.gutterWidth.

[RusinovAnton]

There are still a bunch of setState calls in there, can you see where they are originating from?

Actually, I do not have performance issues with DnD now.
Maybe that was a cache or something. I don't use onSelectEvent tho, just plain on click within event component.

Thanks for great fix, bs85!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.