fix(useDatePicker): resolve per-keystroke lag causing CI timeouts (LIBS-763)#101
Merged
Conversation
… lag useNavigation's internal useMemo was invalidated on every render because its date and options arguments were freshly created inline on every call (withCalendar() returns a new instance each time, and the options object was a new literal each time). Since useMemo compares dependencies by reference, this meant the year (up to 126 entries) and month dropdown lists were rebuilt through Intl on every single render of CalendarInput, including every keystroke while typing. Memoizing both arguments against their real dependencies cuts a 10-keystroke typing benchmark from ~2000ms to ~300ms for gregory and ~760ms to ~90ms for nepali, and should resolve the CI timeouts tracked in LIBS-763. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
calendarWeekDays was rebuilt inline in the returned object on every render, re-running localiseWeekLabel (Intl-backed for non-custom calendars) for every visible day cell (~35-42 cells) regardless of whether anything visible had actually changed. selectedDateZdt was similarly recreated (non-Intl, but unstable, which would have defeated memoizing calendarWeekDays against it). Memoized both against their real dependencies. The day-selection onClick handlers read the latest selectDate through a ref instead of closing over it directly, since selectDate itself is recreated whenever the caller's onDateSelect callback isn't memoized (the common case) and can't be a stable memo dependency. Combined with the previous useNavigation fix, a 10-keystroke typing benchmark now runs in ~28ms for gregory (was ~2000ms) and ~14ms for nepali (was ~760ms). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## alpha #101 +/- ##
==========================================
+ Coverage 94.71% 94.75% +0.03%
==========================================
Files 57 57
Lines 1249 1258 +9
Branches 352 351 -1
==========================================
+ Hits 1183 1192 +9
Misses 65 65
Partials 1 1 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
kabaros
force-pushed
the
fix/LIBS-763-calendar-timeout
branch
from
July 3, 2026 15:33
a5918f4 to
f10b088
Compare
Assert on Intl-backed localisation call counts and referential stability of the memoized navigation/day-cell values, rather than wall-clock timing (too flaky across CI environments). Also verifies the day-cell onClick handler always calls the latest onDateSelect via the ref workaround, even when the calendarWeekDays memo doesn't recompute. Verified these fail against the pre-fix implementation and pass against the fix. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
d-rita
approved these changes
Jul 5, 2026
Contributor
|
🎉 This PR is included in version 2.2.0-alpha.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes https://dhis2.atlassian.net/browse/DHIS2-21183 and https://dhis2.atlassian.net/browse/LIBS-763
Summary
Typing in
CalendarInputwas causing severe lag due to values inuseDatePickerbeing rebuilt from scratch on every render instead of only when their actual inputs changed. This was causing the CI timeouts tracked in LIBS-763.useNavigationargs weren't stable — the date and options objects passed in were fresh instances every render (withCalendar()returns a new object each call; the options object was an inline literal), which brokeuseNavigation's internaluseMemoand caused the year (up to 126 entries) and month dropdown lists to be rebuilt throughIntlon every render.calendarWeekDaysandselectedDateZdtweren't memoized —calendarWeekDayswas rebuilt inline on every render, re-runninglocaliseWeekLabel(Intl-backed) for all ~35-42 visible day cells regardless of whether anything changed.selectedDateZdtwas similarly unstable, which would have blocked memoizingcalendarWeekDaysagainst it even after fixing the above.Memoized
navigationDateZdt,navigationOptions,selectedDateZdt, andcalendarWeekDaysagainst their real dependencies. SinceselectDateitself is recreated whenever the caller'sonDateSelectisn't memoized (the common case), the day-cellonClickhandlers read the latestselectDatevia a ref instead of closing over it directly, avoiding it as an unstable memo dependency.Impact
10-keystroke typing benchmark:
Test plan
CalendarInputfor gregory and a non-gregory (e.g. nepali) calendar and confirm no perceptible lag🤖 Generated with Claude Code