Skip to content
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

[7.0] withSlots: refactor out redundant React.Children traversal #15471

Merged

Conversation

KevinTCoughlin
Copy link
Member

7.0 cherry-pick of #15462.

@codesandbox-ci
Copy link

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 623ac04:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 894 890 5000
BaseButton mount 992 1007 5000
Breadcrumb mount 41741 41899 5000
ButtonNext mount 597 601 5000
Checkbox mount 1693 1699 5000
CheckboxBase mount 1459 1438 5000
ChoiceGroup mount 5391 5338 5000
ComboBox mount 990 974 1000
CommandBar mount 7851 7870 1000
ContextualMenu mount 13532 13581 1000
DefaultButton mount 1215 1235 5000
DetailsRow mount 3935 3942 5000
DetailsRowFast mount 3916 3854 5000
DetailsRowNoStyles mount 3781 3757 5000
Dialog mount 1579 1610 1000
DocumentCardTitle mount 1858 1835 1000
Dropdown mount 2757 2736 5000
FocusTrapZone mount 1825 1851 5000
FocusZone mount 1841 1836 5000
IconButton mount 1897 1905 5000
Label mount 353 343 5000
Layer mount 2039 2051 5000
Link mount 482 465 5000
MenuButton mount 1616 1617 5000
MessageBar mount 2176 2133 5000
Nav mount 3405 3496 1000
OverflowSet mount 1483 1499 5000
Panel mount 1498 1522 1000
Persona mount 874 889 1000
Pivot mount 1489 1503 1000
PrimaryButton mount 1390 1361 5000
Rating mount 8331 8343 5000
SearchBox mount 1409 1380 5000
Shimmer mount 2826 2849 5000
Slider mount 1609 1599 5000
SpinButton mount 5341 5346 5000
Spinner mount 435 439 5000
SplitButton mount 3380 3444 5000
Stack mount 565 540 5000
StackWithIntrinsicChildren mount 1995 1664 5000
StackWithTextChildren mount 5291 5088 5000
SwatchColorPicker mount 10875 10853 5000
TagPicker mount 2967 2957 5000
TeachingBubble mount 50779 50868 5000
Text mount 489 472 5000
TextField mount 1535 1546 5000
ThemeProvider mount 1751 1758 5000
ThemeProvider virtual-rerender 642 668 5000
Toggle mount 899 868 5000
button mount 112 115 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.52 0.96:1 2000 1001
🦄 Button.Fluent 0.13 0.23 0.57:1 5000 672
🔧 Checkbox.Fluent 0.7 0.4 1.75:1 1000 696
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 877
🔧 Dropdown.Fluent 3.05 0.51 5.98:1 1000 3053
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 813
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 462
🔧 Slider.Fluent 1.67 0.39 4.28:1 1000 1670
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 418
🦄 Tooltip.Fluent 0.13 17.03 0.01:1 5000 641

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 179 0 Infinity:1
AlertMinimalPerf.default 341 0 Infinity:1
AnimationMinimalPerf.default 468 0 Infinity:1
AttachmentMinimalPerf.default 185 0 Infinity:1
AvatarMinimalPerf.default 534 0 Infinity:1
BoxMinimalPerf.default 414 0 Infinity:1
ButtonMinimalPerf.default 218 0 Infinity:1
ButtonOverridesMissPerf.default 1778 0 Infinity:1
ButtonSlotsPerf.default 667 0 Infinity:1
ButtonUseCssPerf.default 930 0 Infinity:1
ButtonUseCssNestingPerf.default 1183 0 Infinity:1
CardMinimalPerf.default 627 0 Infinity:1
CarouselMinimalPerf.default 515 0 Infinity:1
ChatDuplicateMessagesPerf.default 463 0 Infinity:1
ChatMinimalPerf.default 733 0 Infinity:1
CheckboxMinimalPerf.default 3004 0 Infinity:1
DialogMinimalPerf.default 890 0 Infinity:1
DividerMinimalPerf.default 459 0 Infinity:1
DropdownManyItemsPerf.default 822 0 Infinity:1
DropdownMinimalPerf.default 3037 0 Infinity:1
EmbedMinimalPerf.default 2123 0 Infinity:1
FlexMinimalPerf.default 342 0 Infinity:1
FormMinimalPerf.default 516 0 Infinity:1
GridMinimalPerf.default 403 0 Infinity:1
HeaderSlotsPerf.default 913 0 Infinity:1
ImageMinimalPerf.default 451 0 Infinity:1
InputMinimalPerf.default 1376 0 Infinity:1
ItemLayoutMinimalPerf.default 1430 0 Infinity:1
LabelMinimalPerf.default 475 0 Infinity:1
LayoutMinimalPerf.default 470 0 Infinity:1
ListCommonPerf.default 749 0 Infinity:1
ListNestedPerf.default 643 0 Infinity:1
ListWith60ListItems.default 991 0 Infinity:1
LoaderMinimalPerf.default 804 0 Infinity:1
MenuMinimalPerf.default 981 0 Infinity:1
MenuButtonMinimalPerf.default 1780 0 Infinity:1
PopupMinimalPerf.default 743 0 Infinity:1
PortalMinimalPerf.default 173 0 Infinity:1
ProviderMergeThemesPerf.default 2130 0 Infinity:1
ProviderMinimalPerf.default 1107 0 Infinity:1
ReactionMinimalPerf.default 486 0 Infinity:1
SegmentMinimalPerf.default 424 0 Infinity:1
SkeletonMinimalPerf.default 503 0 Infinity:1
SliderMinimalPerf.default 1641 0 Infinity:1
SplitButtonMinimalPerf.default 4150 0 Infinity:1
StatusMinimalPerf.default 831 0 Infinity:1
IconMinimalPerf.default 798 0 Infinity:1
TableManyItemsPerf.default 2517 0 Infinity:1
TextAreaMinimalPerf.default 589 0 Infinity:1
CustomToolbarPrototype.default 4046 0 Infinity:1
ToolbarMinimalPerf.default 1129 0 Infinity:1
TooltipMinimalPerf.default 915 0 Infinity:1
TreeMinimalPerf.default 1018 0 Infinity:1
TreeWith60ListItems.default 228 0 Infinity:1
VideoMinimalPerf.default 711 0 Infinity:1
Avatar.Fluent 1001 0 Infinity:1
Checkbox.Fluent 696 0 Infinity:1
Dialog.Fluent 877 0 Infinity:1
Dropdown.Fluent 3053 0 Infinity:1
Icon.Fluent 813 0 Infinity:1
Image.Fluent 462 0 Infinity:1
Slider.Fluent 1670 0 Infinity:1
Text.Fluent 418 0 Infinity:1
AttachmentSlotsPerf.default 1239 1 1239:1
Button.Fluent 672 1 672:1
Tooltip.Fluent 641 1 641:1
ListMinimalPerf.default 552 1 552:1
ChatWithPopoverPerf.default 520 1 520:1
RadioGroupMinimalPerf.default 519 1 519:1
TableMinimalPerf.default 494 1 494:1
TextMinimalPerf.default 439 1 439:1
HeaderMinimalPerf.default 434 1 434:1
RefMinimalPerf.default 247 1 247:1

@size-auditor
Copy link

size-auditor bot commented Oct 12, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-Foundation 34.935 kB 34.903 kB BelowBaseline     -32 bytes
office-ui-fabric-react office-ui-fabric-react-Stack 38.503 kB 38.471 kB BelowBaseline     -32 bytes
office-ui-fabric-react office-ui-fabric-react-TeachingBubble 198.166 kB 198.134 kB BelowBaseline     -32 bytes
office-ui-fabric-react office-ui-fabric-react-Text 34.162 kB 34.13 kB BelowBaseline     -32 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 7fb5ac68250453d2a0e61ddb2a656cbbdda1f4ac (build)

@khmakoto
Copy link
Member

@msft-github-bot merge in 1 minute.

@msft-github-bot
Copy link
Contributor

Hello @khmakoto!

Because you've given me some instructions on how to help merge this pull request, I'll be modifying my merge approach. Here's how I understand your requirements for merging this pull request:

  • I won't merge this pull request until after the UTC date Mon, 12 Oct 2020 19:05:31 GMT, which is in 1 minute

If this doesn't seem right to you, you can tell me to cancel these instructions and use the auto-merge policy that has been configured for this repository. Try telling me "forget everything I just told you".

@msft-github-bot msft-github-bot merged commit 48eec32 into microsoft:7.0 Oct 12, 2020
@KevinTCoughlin KevinTCoughlin deleted the keco/react-children-stack branch October 12, 2020 22:05
@msft-github-bot
Copy link
Contributor

🎉@uifabric/foundation@v7.9.12 has been released which incorporates this pull request.:tada:

Handy links:

@ecraig12345 ecraig12345 removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Dec 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants