Performance: Reduce unnecessary re-renders when selecting dates #994
Description
Before you start - checklist
- I have checked if this feature request is not already reported
Description
I'd like to add a performance optimization feature that prevents unnecessary re-renders when selecting dates in the calendar.
Current behavior:
- When selecting any date, all Day and Tile components (~60 components total) re-render unnecessarily
- Each Day component renders a Tile child, so Day re-renders cause cascading Tile re-renders
- Same date clicks trigger full processing cycle even when no state change occurs
- This causes performance issues, especially noticeable on mobile devices
Impact:
- Measured rendering time: ~18ms on average
- All Day + Tile component pairs re-render on every date selection
- Poor user experience on lower-end devices
2025-08-16.5.19.02.mov
Proposed solution
Implement selective memoization and safe early return to optimize rendering performance:
- Add
React.memoto Day component with custom comparison function that only re-renders when selection state changes - Add early return in Calendar's
onChangehandler after value computation to prevent unnecessary state updates while preserving callback execution - Pass value prop from Days to Day components for accurate selection state comparison
Expected benefits:
- ~60% reduction in rendering time (18.2ms → 7.5ms measured)
- ~93% reduction in unnecessary re-renders (60 Day+Tile → 4 Day+Tile components)
- 100% elimination of duplicate date click processing
- Zero breaking changes to existing API - all existing callbacks remain functional
Alternatives
Considered alternatives:
- Custom calendar implementation
- Pros: Full control over optimization
- Cons: High development cost, maintenance burden
- Different calendar library
- Pros: Might have better performance out of the box
- Cons: Migration cost, learning curve, feature differences
- Patch-package solution
- Pros: Immediate fix, already implemented and tested
- Cons: Not sustainable long-term, doesn't benefit community
Why the proposed solution is better:
- Maintains backward compatibility
- Benefits entire react-calendar community
- Minimal code changes with maximum impact
Additional information
Performance benchmarks:
I've already implemented and tested this optimization using pnpm patch:
- Before: 60 components re-render on date selection (30 Day + 30 Tile, 18.2ms average)
- After: 4 components re-render on date selection (2 Day + 2 Tile, 7.5ms average)
Test environment:
- React 19.x, TypeScript
- Tested on Chrome DevTools mobile simulation
- 20 measurements averaged for accuracy
Implementation details:
- Already have working patch with exact changes needed
- All existing tests pass with current implementation
- No breaking changes to public API
2025-08-16.5.20.26.mov
Would be happy to submit a PR with this optimization if there's interest!