React-big-calendar: Month view performance hit when having many events

Created on 3 Apr 2016 · 3Comments · Source: jquense/react-big-calendar

Does anybody also experience performance hit when having many events on one month? The next and back action is laggy.
By 'many' I mean 40+ events (daily repeat events in my case).
Is there any tip or advice to avoid the performance hit?

Source

zhming0

Most helpful comment

@jquense I did some experiments. Yes, you are right. It is not rendering bottleneck. It turned out to be the startAccessor issue, I used to process date using moment.js in startAccessor. The performance hit almost goes away when I use static string for startAccessor.

For the smart filtering in the case of large amounts of events, I don't think it will solve the performance hit if user is navigating betweens months very quickly. Maybe It will be better if the filtering is an asynchronous function implemented by the Calendar? The Calendar can also provides an loading view (spinner).

zhming0 on 4 Apr 2016

👍3

All 3 comments

I don't think its a rendering bottleneck, as I've seen the calendar be very zippy with 100s of events a month. What may be teh issue is that is your calendar is passed a lot of events via events every time you need to switch views (like navigating between months) it needs to filter down your array of events to just the ones relevant for each week. That process is not as optimized as it might be because of an inability to make assumptions about your events and their mutability.

You can however do a round of smart filtering _before_ you pass the events to the Calendar component. In our use case we only ever pass 2-3 months worth of events to the Calendar at a time, which reduces that amount of computation it has to do to a reasonable amount.