Before you start - checklist
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.memo to Day component with custom comparison function that only re-renders when selection state changes
Add early return in Calendar's onChange handler 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!
Before you start - checklist
Description
I'd like to add a performance optimization feature that prevents unnecessary re-renders when selecting dates in the calendar.
Current behavior:
Impact:
2025-08-16.5.19.02.mov
Proposed solution
Implement selective memoization and safe early return to optimize rendering performance:
React.memoto Day component with custom comparison function that only re-renders when selection state changesonChangehandler after value computation to prevent unnecessary state updates while preserving callback executionExpected benefits:
Alternatives
Considered alternatives:
Why the proposed solution is better:
Additional information
Performance benchmarks:
I've already implemented and tested this optimization using
pnpm patch:Test environment:
Implementation details:
2025-08-16.5.20.26.mov
Would be happy to submit a PR with this optimization if there's interest!