Skip to content

Conversation

@TirlaP
Copy link
Contributor

@TirlaP TirlaP commented May 31, 2025

Optimize Month view performance for large event datasets

Request by ahmetcengz: #2752

Problem

Month view had severe performance issues with 1000+ events:

  • Slow initial rendering (3-5s for 1000 events)
  • Full re-renders when clicking "Show more" popups
  • Inefficient event sorting and distribution

Solution

  1. Isolated popup rendering - New IsolatedOverlayManager uses React Portals to prevent Month re-renders when showing popups
  2. Optimized event processing - Added fast preprocessing that distributes events to weeks in O(n) time using hash maps, and separates single-day/multi-day events for efficient
    sorting
  3. Layout caching - Cache expensive DateSlotMetrics calculations to avoid redundant computations

Performance Results

  • 1,000 events: ~0.5-1s (was 3-5s)
  • 10,000 events: ~3-5s (was 30+s)
  • Popup clicks: Instant (no re-renders)

Changes

  • Added src/IsolatedOverlayManager.js for portal-based popups
  • Optimized src/Month.js with event preprocessing and caching
  • Added metrics caching to src/DateContentRow.js
  • Minor cleanups and import reordering

No breaking changes - all functionalities remain the same.

@cutterbl can you take a look when you have some time? I tried to test everything to make sure there are no breaking changes.

But as performance goes, this one is pretty big one.

And idk if it's worth on updating this library to functional components and another React version.

Example User added 3 commits May 31, 2025 18:32
- Add IsolatedOverlayManager to render popups outside Month component tree
- Implement event preprocessing and caching by week
- Memoize DateContentRow to prevent unnecessary re-renders
- Cache expensive layout calculations in DateSlotMetrics
- Optimize event sorting with fast path for single-day events

These changes significantly improve performance with 1000+ events by:
- Preventing full Month re-renders when showing popups
- Reducing layout calculation frequency
- Optimizing event distribution across weeks
@TirlaP
Copy link
Contributor Author

TirlaP commented May 31, 2025

@ahmetcengz take a look over this

@cutterbl
Copy link
Collaborator

@TirlaP I like what you've done here. Have you tested as far back as React 17?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants