acro5piano / react-native-big-calendar

gcal/outlook like calendar component for React Native
https://react-native-big-calendar.vercel.app
MIT License
441 stars 145 forks source link

feat: create custom renderer to improve performance on bigger datasets #977

Closed Lespoir closed 10 months ago

Lespoir commented 10 months ago

Context

Recently I discovered we are having some issues on week mode when passing a larger dataset of events. This issue is caused due HERE we are filtering 3 times the event list in each re-render.

Solution

Now when enabling the enrichedEvents through the prop enableEnrichedEvents the lib will be using a new way to organize and render the events:

  1. Lib preprocess the events creating a dictionary where the key is the date of the event and the value is the event itself. a. In case of multi-day events, the event will be duplicated (will be in all the keys from the start to the end date)
  2. Lib renders the events inside a useCallback improving the performance on re-renders
  3. we iterate just one time over the event list when rendering them

Tests

Storybook

I adjusted the story named "Tons of sorted events" to show week mode and show one multi-day event

vercel[bot] commented 10 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-native-big-calendar ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 27, 2023 4:45pm
Lespoir commented 10 months ago

@acro5piano Could you please take a look

acro5piano commented 10 months ago

@Lespoir Nice catch. Thanks for your contribution!