fix: re-implement List early render #27002
Merged
Conversation
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
Previously this had been implemented as the new default behavior for List rendering but it broke advanced rendering scenarios like TilesList. This PR puts the early render behavior behind a flag to ensure that existing controls like TilesList will continue to function with no changes while experiences that need the new behavior can opt into it.
Collaborator
📊 Bundle size report🤖 This report was generated against 4652fbe1f9472d5080af23ace0085b1dddd3013c |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 27e2f7c:
|
Asset size changes
Baseline commit: 4652fbe1f9472d5080af23ace0085b1dddd3013c (build) |
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 792 | 776 | 5000 | |
| Breadcrumb | mount | 2076 | 2019 | 1000 | |
| Checkbox | mount | 2096 | 2079 | 5000 | |
| CheckboxBase | mount | 1860 | 1862 | 5000 | |
| ChoiceGroup | mount | 3561 | 3548 | 5000 | |
| ComboBox | mount | 794 | 802 | 1000 | |
| CommandBar | mount | 7671 | 7715 | 1000 | |
| ContextualMenu | mount | 12931 | 13080 | 1000 | |
| DefaultButton | mount | 940 | 932 | 5000 | |
| DetailsRow | mount | 2646 | 2650 | 5000 | |
| DetailsRowFast | mount | 2655 | 2645 | 5000 | |
| DetailsRowNoStyles | mount | 2402 | 2452 | 5000 | |
| Dialog | mount | 3183 | 3206 | 1000 | |
| DocumentCardTitle | mount | 283 | 294 | 1000 | |
| Dropdown | mount | 2457 | 2445 | 5000 | |
| FocusTrapZone | mount | 1433 | 1420 | 5000 | |
| FocusZone | mount | 1359 | 1350 | 5000 | |
| GroupedList | mount | 45445 | 45349 | 2 | |
| GroupedList | virtual-rerender | 22230 | 22062 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 62333 | 62616 | 2 | |
| GroupedListV2 | mount | 289 | 284 | 2 | |
| GroupedListV2 | virtual-rerender | 272 | 266 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 293 | 288 | 2 | |
| IconButton | mount | 1310 | 1320 | 5000 | |
| Label | mount | 443 | 433 | 5000 | |
| Layer | mount | 3420 | 3481 | 5000 | |
| Link | mount | 518 | 522 | 5000 | |
| MenuButton | mount | 1127 | 1142 | 5000 | |
| MessageBar | mount | 26103 | 25748 | 5000 | |
| Nav | mount | 2312 | 2367 | 1000 | |
| OverflowSet | mount | 994 | 992 | 5000 | |
| Panel | mount | 2154 | 2164 | 1000 | |
| Persona | mount | 915 | 937 | 1000 | |
| Pivot | mount | 1070 | 1065 | 1000 | |
| PrimaryButton | mount | 1052 | 1044 | 5000 | |
| Rating | mount | 5755 | 5793 | 5000 | |
| SearchBox | mount | 1123 | 1128 | 5000 | |
| Shimmer | mount | 2371 | 2326 | 5000 | |
| Slider | mount | 1660 | 1661 | 5000 | |
| SpinButton | mount | 3395 | 3437 | 5000 | |
| Spinner | mount | 531 | 524 | 5000 | |
| SplitButton | mount | 2187 | 2196 | 5000 | |
| Stack | mount | 532 | 541 | 5000 | |
| StackWithIntrinsicChildren | mount | 1087 | 1103 | 5000 | |
| StackWithTextChildren | mount | 3349 | 3379 | 5000 | |
| SwatchColorPicker | mount | 7314 | 7384 | 5000 | |
| TagPicker | mount | 1731 | 1754 | 5000 | |
| Text | mount | 490 | 486 | 5000 | |
| TextField | mount | 1125 | 1137 | 5000 | |
| ThemeProvider | mount | 1022 | 1010 | 5000 | |
| ThemeProvider | virtual-rerender | 799 | 805 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1541 | 1560 | 5000 | |
| Toggle | mount | 788 | 778 | 5000 | |
| buttonNative | mount | 246 | 240 | 5000 |
github-actions
bot
modified the milestones:
February Project Cycle Q1 2023,
March Project Cycle Q1 2023
Contributor
Author
|
@mbest I cannot add you as a reviewer but I'd appreciate your input on this. Unfortunately, I've not been able to find a way to implement the early render that doesn't break the rendering of TilesList (which depends on List) so I'm making it opt-in here. I'm open to suggestions on how to make it the default behavior but I think this might be the safest course. cc: @ThomasMichon |
github-actions
bot
modified the milestones:
March Project Cycle Q1 2023,
April Project Cycle Q2 2023
GeoffCoxMSFT
approved these changes
Apr 3, 2023
fabricteam
reviewed
Apr 7, 2023
This was referenced Jun 21, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 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.
Previous Behavior
Lists cannot be focused in certain situations like when displayed in a Dialog. See #23925 for details.
New Behavior
When using the
renderEarlyflag List can be focused when displayed in a Dialog. The root of the issue is that, by default, List takes multiple passes to render its content and the actual list contents are not available after the first Reactrender()call. Because nothing is rendered on the first passFocusZonedoes not "see" the List and will not focus it. This change allows users to opt into rendering early to address this issue.Previously this early render behavior was made the default for List (see: #25331) but that resulted in a regression for TilesList (see: #26899). Because of the complexity of the controls in question I've decided to make the new behavior opt-in for users that need it.
Related Issue(s)
Depends on