fix(dropdown): stabilize internal references to reduce re-renders #17952
Conversation
This file contains 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
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #17952 +/- ##
==========================================
+ Coverage 81.81% 81.82% +0.01%
==========================================
Files 406 406
Lines 14053 14070 +17
Branches 4405 4409 +4
==========================================
+ Hits 11497 11513 +16
Misses 2394 2394
- Partials 162 163 +1 ☔ View full report in Codecov by Sentry. |
|
I'll need to remove the test story before this can merge |
tay1orjones
requested review from
alisonjoseph
and removed request for
annawen1
Merged
via the queue into
carbon-design-system:main
with commit Nov 6, 2024
4b77a2a
40 checks passed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Closes #17897
This makes Dropdown's internal references (variables, functions, props, etc) more stable to reduce re-renders by ~98% 🤯
Changelog
Changed
stateReducerto be delcared outside of the componentonSelectedItemChangeinuseCallbackreadOnlyEventHandlers, and wrap theonKeyDownHandlerit uses withuseCallbacknormalizedSlugthat clones theslugprop and forces theminisizestateReducerby returningstatedirectly instead of a new object every time (this alone was a huge improvement)itemsselectPropsand all the props passed in (isItemDisabled,onHighlightedIndexChange)toggleButtonPropsenableFloatingStylesto the dependency array to ensuremenuPropswill get updatedTesting / Reviewing
Click to expand test results
The benchmark I tested against is the original bug repro with the following interactions, resulting in 4674 renders.
2024-11-01.at.13.45.43-MAIN-Google.Chrome.mp4
The first commit reduces this same interaction to 2145 renders.
2024-11-01.at.14.11.22-MAIN-Google.Chrome.mp4
The second commit is even better, down to just 89 renders.
2024-11-01.at.14.51.19-MAIN-Google.Chrome.mp4
The first two counts are somewhat of an incorrect count because they're tied to mousemove interaction. The update to
stateReduceris what pulled that down so significantly.