feat:(docs) Adds pattern doc on Basic Recomposition #31861
Merged
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
There was a problem hiding this comment.
This is a great doc! one thing to note is that this is a very specific use case, but sometimes we might need to update the render function or some of the other hooks. I think this is a great candidate for a recipe, especially if we show how to recompose a complex, but common scenario.
sopranopillow
approved these changes
Jun 28, 2024
TristanWatanabe
approved these changes
Jun 28, 2024
khmakoto
approved these changes
Jun 28, 2024
mltejera
force-pushed
the
doc/recomposition-pattern
branch
from
7143e93
to
dc4ee3d
Compare
mltejera
force-pushed
the
doc/recomposition-pattern
branch
from
dc4ee3d
to
1f53401
Compare
fabricteam
reviewed
Jul 1, 2024
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| FluentProviderWithTheme | virtual-rerender | 37 | 35 | 10 | Possible regression |
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 628 | 640 | 5000 | |
| Button | mount | 314 | 306 | 5000 | |
| Field | mount | 1173 | 1154 | 5000 | |
| FluentProvider | mount | 706 | 704 | 5000 | |
| FluentProviderWithTheme | mount | 77 | 95 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 37 | 35 | 10 | Possible regression |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 77 | 84 | 10 | |
| MakeStyles | mount | 882 | 847 | 50000 | |
| Persona | mount | 1768 | 1768 | 5000 | |
| SpinButton | mount | 1410 | 1377 | 5000 | |
| SwatchPicker | mount | 1674 | 1675 | 5000 |
fabricteam
reviewed
Jul 1, 2024
Perf Analysis (
|
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| ChatDuplicateMessagesPerf.default | 162 | 133 | 1.22:1 |
| ButtonMinimalPerf.default | 104 | 91 | 1.14:1 |
| AvatarMinimalPerf.default | 117 | 106 | 1.1:1 |
| ButtonOverridesMissPerf.default | 713 | 658 | 1.08:1 |
| ListMinimalPerf.default | 313 | 292 | 1.07:1 |
| PortalMinimalPerf.default | 88 | 82 | 1.07:1 |
| ReactionMinimalPerf.default | 208 | 195 | 1.07:1 |
| BoxMinimalPerf.default | 202 | 190 | 1.06:1 |
| ButtonSlotsPerf.default | 328 | 308 | 1.06:1 |
| TextAreaMinimalPerf.default | 294 | 277 | 1.06:1 |
| AttachmentSlotsPerf.default | 655 | 622 | 1.05:1 |
| LayoutMinimalPerf.default | 204 | 195 | 1.05:1 |
| PopupMinimalPerf.default | 353 | 337 | 1.05:1 |
| TableMinimalPerf.default | 240 | 228 | 1.05:1 |
| AttachmentMinimalPerf.default | 86 | 83 | 1.04:1 |
| IconMinimalPerf.default | 398 | 384 | 1.04:1 |
| TreeMinimalPerf.default | 481 | 463 | 1.04:1 |
| DividerMinimalPerf.default | 201 | 196 | 1.03:1 |
| DropdownManyItemsPerf.default | 384 | 373 | 1.03:1 |
| HeaderMinimalPerf.default | 200 | 195 | 1.03:1 |
| HeaderSlotsPerf.default | 468 | 454 | 1.03:1 |
| ImageMinimalPerf.default | 220 | 214 | 1.03:1 |
| ProviderMergeThemesPerf.default | 661 | 642 | 1.03:1 |
| TextMinimalPerf.default | 196 | 191 | 1.03:1 |
| TooltipMinimalPerf.default | 1286 | 1244 | 1.03:1 |
| AlertMinimalPerf.default | 159 | 156 | 1.02:1 |
| EmbedMinimalPerf.default | 1885 | 1855 | 1.02:1 |
| ListCommonPerf.default | 378 | 372 | 1.02:1 |
| MenuMinimalPerf.default | 507 | 498 | 1.02:1 |
| MenuButtonMinimalPerf.default | 947 | 932 | 1.02:1 |
| SkeletonMinimalPerf.default | 199 | 195 | 1.02:1 |
| SliderMinimalPerf.default | 717 | 702 | 1.02:1 |
| ToolbarMinimalPerf.default | 531 | 522 | 1.02:1 |
| AnimationMinimalPerf.default | 296 | 292 | 1.01:1 |
| ChatMinimalPerf.default | 424 | 419 | 1.01:1 |
| ChatWithPopoverPerf.default | 203 | 200 | 1.01:1 |
| CheckboxMinimalPerf.default | 1127 | 1117 | 1.01:1 |
| DropdownMinimalPerf.default | 1408 | 1399 | 1.01:1 |
| RadioGroupMinimalPerf.default | 257 | 254 | 1.01:1 |
| SegmentMinimalPerf.default | 195 | 193 | 1.01:1 |
| StatusMinimalPerf.default | 394 | 391 | 1.01:1 |
| CardMinimalPerf.default | 311 | 310 | 1:1 |
| CarouselMinimalPerf.default | 261 | 260 | 1:1 |
| DialogMinimalPerf.default | 433 | 434 | 1:1 |
| ListWith60ListItems.default | 366 | 367 | 1:1 |
| RosterPerf.default | 1548 | 1554 | 1:1 |
| ProviderMinimalPerf.default | 199 | 199 | 1:1 |
| SplitButtonMinimalPerf.default | 2214 | 2216 | 1:1 |
| DatepickerMinimalPerf.default | 3507 | 3558 | 0.99:1 |
| LabelMinimalPerf.default | 211 | 213 | 0.99:1 |
| GridMinimalPerf.default | 190 | 194 | 0.98:1 |
| InputMinimalPerf.default | 524 | 537 | 0.98:1 |
| LoaderMinimalPerf.default | 181 | 184 | 0.98:1 |
| TableManyItemsPerf.default | 1074 | 1095 | 0.98:1 |
| CustomToolbarPrototype.default | 1452 | 1488 | 0.98:1 |
| FlexMinimalPerf.default | 149 | 153 | 0.97:1 |
| FormMinimalPerf.default | 211 | 217 | 0.97:1 |
| ItemLayoutMinimalPerf.default | 685 | 709 | 0.97:1 |
| RefMinimalPerf.default | 105 | 109 | 0.96:1 |
| VideoMinimalPerf.default | 419 | 435 | 0.96:1 |
| ListNestedPerf.default | 309 | 327 | 0.94:1 |
| TreeWith60ListItems.default | 78 | 83 | 0.94:1 |
| AccordionMinimalPerf.default | 76 | 82 | 0.93:1 |
🕵 FluentUIV0 No visual regressions between this PR and main |
📊 Bundle size report✅ No changes found |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 621 | 629 | 5000 | |
| Breadcrumb | mount | 1686 | 1677 | 1000 | |
| Checkbox | mount | 1693 | 1698 | 5000 | |
| CheckboxBase | mount | 1499 | 1490 | 5000 | |
| ChoiceGroup | mount | 3025 | 2998 | 5000 | |
| ComboBox | mount | 687 | 692 | 1000 | |
| CommandBar | mount | 6619 | 6683 | 1000 | |
| ContextualMenu | mount | 11990 | 12026 | 1000 | |
| DefaultButton | mount | 803 | 790 | 5000 | |
| DetailsRow | mount | 2232 | 2247 | 5000 | |
| DetailsRowFast | mount | 2286 | 2275 | 5000 | |
| DetailsRowNoStyles | mount | 2059 | 2029 | 5000 | |
| Dialog | mount | 2866 | 2669 | 1000 | |
| DocumentCardTitle | mount | 236 | 221 | 1000 | |
| Dropdown | mount | 2015 | 2019 | 5000 | |
| FocusTrapZone | mount | 1175 | 1159 | 5000 | |
| FocusZone | mount | 1097 | 1067 | 5000 | |
| GroupedList | mount | 42382 | 42215 | 2 | |
| GroupedList | virtual-rerender | 18094 | 20331 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 55712 | 51294 | 2 | |
| GroupedListV2 | mount | 254 | 237 | 2 | |
| GroupedListV2 | virtual-rerender | 211 | 227 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 227 | 231 | 2 | |
| IconButton | mount | 1142 | 1148 | 5000 | |
| Label | mount | 338 | 347 | 5000 | |
| Layer | mount | 2806 | 2740 | 5000 | |
| Link | mount | 401 | 396 | 5000 | |
| MenuButton | mount | 974 | 986 | 5000 | |
| MessageBar | mount | 21138 | 21139 | 5000 | |
| Nav | mount | 2047 | 2029 | 1000 | |
| OverflowSet | mount | 802 | 811 | 5000 | |
| Panel | mount | 1836 | 1818 | 1000 | |
| Persona | mount | 746 | 766 | 1000 | |
| Pivot | mount | 895 | 902 | 1000 | |
| PrimaryButton | mount | 931 | 931 | 5000 | |
| Rating | mount | 4736 | 4720 | 5000 | |
| SearchBox | mount | 922 | 919 | 5000 | |
| Shimmer | mount | 1954 | 1938 | 5000 | |
| Slider | mount | 1345 | 1353 | 5000 | |
| SpinButton | mount | 2990 | 2911 | 5000 | |
| Spinner | mount | 396 | 387 | 5000 | |
| SplitButton | mount | 1897 | 1928 | 5000 | |
| Stack | mount | 429 | 435 | 5000 | |
| StackWithIntrinsicChildren | mount | 864 | 871 | 5000 | |
| StackWithTextChildren | mount | 2762 | 2840 | 5000 | |
| SwatchColorPicker | mount | 6623 | 6389 | 5000 | |
| TagPicker | mount | 1433 | 1559 | 5000 | |
| Text | mount | 376 | 385 | 5000 | |
| TextField | mount | 947 | 910 | 5000 | |
| ThemeProvider | mount | 853 | 866 | 5000 | |
| ThemeProvider | virtual-rerender | 580 | 582 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1307 | 1303 | 5000 | |
| Toggle | mount | 629 | 615 | 5000 | |
| buttonNative | mount | 184 | 191 | 5000 |
fabricteam
reviewed
Jul 1, 2024
mltejera
force-pushed
the
doc/recomposition-pattern
branch
from
1f53401
to
1272913
Compare
marcosmoura
added a commit
to marcosmoura/fluentui
that referenced
this pull request
Jul 3, 2024
* master: (45 commits) Added unit testcases for sparkline chart. (microsoft#31843) release: applying package updates - react v8 release: applying package updates - web-components fix(web-components): fix enterkey interaction on menu (microsoft#31894) chore(web-components): expose field to package exports (microsoft#31904) fix(web-components): slotted elements within fluent-text-input can't be focused (microsoft#31903) fix(web-components): fix menu positioning in firefox (microsoft#31895) chore: bump @types/node types to v20 and @tsconfig to v18 (microsoft#31510) chore: migrate to nx 19.2.3 (microsoft#31828) chore: fix install verdacio command (microsoft#31897) fix(scripts-prettier): escape file names that are being passed to prettier bin via shell (microsoft#31889) release: applying package updates - react-components feat:(docs) Adds pattern doc on Basic Recomposition (microsoft#31861) chore:(docs) Archive the wiki 🎉 (microsoft#31202) feat:(react-nav-preview) Adds NavDivider implementation (microsoft#31848) ci(.github): resolve due_on UTC time creation issues (microsoft#31890) release: applying package updates - web-components fix: update internal usage of useModalAttributes to use legacyTrapFocus by default (microsoft#31801) chore: make utils a package export (microsoft#31865) fix: add live region around scroll index update (microsoft#31863) ...
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.
I had to do some recomposition for the Nav. I figured I'd help others learn some lesson's I picked up along the way.
Please review for typos, grammar, correct terminology and general flow 🙂