Skip to content

feat:(docs) Adds pattern doc on Basic Recomposition#31861

Merged
mltejera merged 3 commits intomicrosoft:masterfrom
mltejera:doc/recomposition-pattern
Jul 1, 2024
Merged

feat:(docs) Adds pattern doc on Basic Recomposition#31861
mltejera merged 3 commits intomicrosoft:masterfrom
mltejera:doc/recomposition-pattern

Conversation

@mltejera
Copy link
Contributor

@mltejera mltejera commented Jun 28, 2024 •
edited
Loading

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 🙂

@mltejera mltejera requested review from a team as code owners June 28, 2024 16:59
sopranopillow
sopranopillow reviewed Jun 28, 2024
View reviewed changes
Copy link
Contributor

@sopranopillow sopranopillow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

TristanWatanabe
TristanWatanabe approved these changes Jun 28, 2024
View reviewed changes
Copy link
Member

@TristanWatanabe TristanWatanabe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great doc! Learned something new about when to invoke the base styles 😃

khmakoto
khmakoto approved these changes Jun 28, 2024
View reviewed changes
@mltejera mltejera force-pushed the doc/recomposition-pattern branch from 7143e93 to dc4ee3d Compare June 28, 2024 19:34
@mltejera mltejera force-pushed the doc/recomposition-pattern branch from dc4ee3d to 1f53401 Compare July 1, 2024 16:24
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 1, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

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
Copy link
Collaborator

fabricteam commented Jul 1, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
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

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 1, 2024 •
edited
Loading

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 1, 2024 •
edited
Loading

📊 Bundle size report

✅ No changes found

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 1, 2024 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

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

@mltejera mltejera force-pushed the doc/recomposition-pattern branch from 1f53401 to 1272913 Compare July 1, 2024 16:57
@mltejera mltejera merged commit 597871c into microsoft:master Jul 1, 2024
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jul 3, 2024
@marcosmoura
Merge branch 'master' into rfc/z-index-handling
1001741 
* 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

Reviewers

@fabricteam fabricteam fabricteam left review comments

@Mitch-At-Work Mitch-At-Work Mitch-At-Work left review comments

@sopranopillow sopranopillow sopranopillow approved these changes

@khmakoto khmakoto khmakoto approved these changes

@TristanWatanabe TristanWatanabe TristanWatanabe approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@mltejera @fabricteam @sopranopillow @khmakoto @TristanWatanabe @Mitch-At-Work