-
Notifications
You must be signed in to change notification settings - Fork 2.9k
List: Re-initialize on mount in React 18. #29881
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
List: Re-initialize on mount in React 18. #29881
Conversation
|
@microsoft-github-policy-service agree company="Eshgro" |
|
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 e248b8a:
|
|
Thanks for the PR @mhverbakel ! @ThomasMichon I'd appreciate your review on this as it's a substantive change to List behavior. |
|
/azp run |
|
Azure Pipelines successfully started running 4 pipeline(s). |
🕵 fluentuiv8 No visual regressions between this PR and main |
📊 Bundle size report🤖 This report was generated against 99e1128925fa5863a99e311884cc2c710c2606bd |
Asset size changes
Baseline commit: 99e1128925fa5863a99e311884cc2c710c2606bd (build) |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 650 | 636 | 5000 | |
| Breadcrumb | mount | 1675 | 1680 | 1000 | |
| Checkbox | mount | 1692 | 1670 | 5000 | |
| CheckboxBase | mount | 1449 | 1472 | 5000 | |
| ChoiceGroup | mount | 2946 | 2965 | 5000 | |
| ComboBox | mount | 655 | 660 | 1000 | |
| CommandBar | mount | 6249 | 6287 | 1000 | |
| ContextualMenu | mount | 12241 | 12503 | 1000 | |
| DefaultButton | mount | 762 | 761 | 5000 | |
| DetailsRow | mount | 2217 | 2171 | 5000 | |
| DetailsRowFast | mount | 2215 | 2214 | 5000 | |
| DetailsRowNoStyles | mount | 2020 | 2011 | 5000 | |
| Dialog | mount | 2616 | 2813 | 1000 | |
| DocumentCardTitle | mount | 220 | 226 | 1000 | |
| Dropdown | mount | 1964 | 1980 | 5000 | |
| FocusTrapZone | mount | 1155 | 1142 | 5000 | |
| FocusZone | mount | 1092 | 1073 | 5000 | |
| GroupedList | mount | 41827 | 41841 | 2 | |
| GroupedList | virtual-rerender | 19991 | 19931 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 50781 | 50193 | 2 | |
| GroupedListV2 | mount | 232 | 228 | 2 | |
| GroupedListV2 | virtual-rerender | 209 | 219 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 225 | 216 | 2 | |
| IconButton | mount | 1095 | 1079 | 5000 | |
| Label | mount | 338 | 340 | 5000 | |
| Layer | mount | 2756 | 2774 | 5000 | |
| Link | mount | 379 | 382 | 5000 | |
| MenuButton | mount | 926 | 962 | 5000 | |
| MessageBar | mount | 21811 | 21640 | 5000 | |
| Nav | mount | 1998 | 1927 | 1000 | |
| OverflowSet | mount | 772 | 782 | 5000 | |
| Panel | mount | 2020 | 1821 | 1000 | |
| Persona | mount | 742 | 726 | 1000 | |
| Pivot | mount | 860 | 873 | 1000 | |
| PrimaryButton | mount | 839 | 856 | 5000 | |
| Rating | mount | 4599 | 4646 | 5000 | |
| SearchBox | mount | 901 | 940 | 5000 | |
| Shimmer | mount | 1889 | 1911 | 5000 | |
| Slider | mount | 1355 | 1331 | 5000 | |
| SpinButton | mount | 2852 | 2872 | 5000 | |
| Spinner | mount | 383 | 398 | 5000 | |
| SplitButton | mount | 1892 | 1852 | 5000 | |
| Stack | mount | 401 | 405 | 5000 | |
| StackWithIntrinsicChildren | mount | 873 | 873 | 5000 | |
| StackWithTextChildren | mount | 2649 | 2560 | 5000 | |
| SwatchColorPicker | mount | 6239 | 6202 | 5000 | |
| TagPicker | mount | 1429 | 1458 | 5000 | |
| Text | mount | 371 | 372 | 5000 | |
| TextField | mount | 918 | 910 | 5000 | |
| ThemeProvider | mount | 838 | 838 | 5000 | |
| ThemeProvider | virtual-rerender | 581 | 586 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1260 | 1290 | 5000 | |
| Toggle | mount | 630 | 591 | 5000 | |
| buttonNative | mount | 191 | 187 | 5000 |
|
@spmonahan I fixed the tests in d38349b, however, I could not find the reason why those lines were there in the first place. I've looked at the history of the file, trying to figure out what they originally meant. These lines were there from the start, and without them, everything works just fine. My assumption is that |
|
/azp run |
|
Azure Pipelines successfully started running 4 pipeline(s). |
* master: (166 commits) Remove v0 dependency from v0 compat package (microsoft#30276) applying package updates Disallow `window` and `document` access for `@fluentui/react` and related packages. (microsoft#30063) Update Rating api and stories (microsoft#30092) TeachingPopover: Minor style changes (microsoft#30270) feat(scripts-gulp): replace lerna with nx (microsoft#30266) ci: remove canary and nightly functionality from northstar (microsoft#30264) List: Re-initialize on mount in React 18. (microsoft#29881) feat(scripts-monorepo): replace lerna/utils with pure nx apis (microsoft#30178) chore: remove react-timepicker-compat-preview (microsoft#30263) applying package updates feat(TimePicker-compat): stable release (microsoft#30217) feat: Implement onPositioningEnd callback (microsoft#30177) applying package updates v8 registerIcons compat (microsoft#30003) Adding Planner, ToDoItem and updated Project filetype icons. Updating FabricCDN url to latest datecode. (microsoft#30079) Scaffolds more Nav components (microsoft#30227) chore: migrate to nx 17.2 (microsoft#30187) applying package updates feat: Update position when target or container dimensions change (microsoft#30179) ...
Fixes #29880.
Better approach now. Moving async AND event to componentDidMount will make sure they are instantiated each time the component is mounted (which is twice in R18 strict)