React-calendar: Highlighting works extremely slow when selectRange is enabled

[apyrkh]

Highlighting works extremely slow when selectRange is enabled.
It doesn't matter either you're using react-daterange-select or using sample in react-calendar.

On the other hand it works very fast here http://projects.wojtekmaj.pl/react-daterange-picker

[daniel-hill]

Experiencing this too. Initially thought it was the difference between a dev / production build but even after building it's still very sluggish. Demo site works really well though.

[daniel-hill]

@wojtekmaj any ideas?

[wojtekmaj]

Highlighting tiles in selectRange mode works, sadly, by setting new state on hover to keep track of the highlight. I don't know an easy way to do this sort of highlight using purely CSS. So some operations are needed to make it happen...

Demo site isn't doing any special tricks, it's pure production build... :)

[daniel-hill]

Thanks for your reply. Interesting! I agree I don't think there's a pure CSS solution, there has to be some logic to work out where to start & end. Curious, are you implementing shouldComponentUpdate or PureComponents to help prevent unnecessary renders?

[wojtekmaj]

I do! At this point I'm out of ideas what to optimize. There's not much I can squeeze from this architecture, looks like it's time for a rewrite :) Meanwhile I welcome all suggestions on how to make the performance better.

[apyrkh]

Some comments from me:
I found out that recalculation of styles is performed even when moving inside the same date.
I mean there is a button with a day. And redundant recalculation is performed when cursor moved out from day (number) but stay inside the button.

So everybody has no time to fix this now. Let's wait until there is a time for the fix.
I hope I'll have some time for this soon.

[OsipovIgor]

Can you make an additional prop? It will determine if I need a tint when moving the mouse, if I don’t need to redraw the component. In my case it will help a lot, because in my styles I don’t select the days buttons when moving the mouse.