Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(List): add proper support for children API #2207

Merged
merged 20 commits into from
Feb 14, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jan 3, 2020

This PR uses context-selectors to add full support for Children API in List component.

Performance 🏎

There is no real difference between shorthand/Context usage.

With Context usage

Example min avg median max renderComponent.min renderComponent.avg renderComponent.median renderComponent.max components
ListNested.perf.tsx 793.39 818.49 817.41 857.03 641.66 668.76 667.75 700.61 5426
ListNested.perf.tsx 797.84 817.34 815.36 858.54 650.95 667.88 665.44 702.12 5426
ListNested.perf.tsx 800.74 821.73 820.21 858.53 649.26 671.6 671.02 701.88 5426

Previous implementation

Example min avg median max renderComponent.min renderComponent.avg renderComponent.median renderComponent.max components
ListNested.perf.tsx 806.89 836.46 836.58 868.65 643.83 666.22 665.62 691.24 5426
ListNested.perf.tsx 812.05 855.68 840.79 1024.46 643.09 681.92 671.1 806.44 5426

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Jan 3, 2020

Warnings
⚠️ Package (or peer) dependencies changed. Make sure you have approval before merging!
⚠️ 3 perf regressions detected

Changed dependencies are detected.

Changed dependencies in packages/react/package.json

package before after
@fluentui/react-context-selector - ^0.44.0

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.46 0.38 1.21:1 2000 922
🎯 Button.Fluent 0.12 0.17 0.71:1 1000 122
🔧 Checkbox.Fluent 0.76 0.29 2.62:1 1000 764
🔧 Dialog.Fluent 0.3 0.16 1.88:1 5000 1522
🔧 Dropdown.Fluent 3.34 0.5 6.68:1 1000 3344
🔧 Icon.Fluent 0.11 0.03 3.67:1 5000 545
🦄 Image.Fluent 0.04 0.07 0.57:1 5000 221
🔧 Slider.Fluent 1.46 0.3 4.87:1 1000 1455
🔧 Text.Fluent 0.05 0.02 2.5:1 5000 255
🦄 Tooltip.Fluent 0.14 19.39 0.01:1 5000 691

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
ListNestedPerf.default 669 40 16.73:1
ListWith60ListItems.default 152 42 3.62:1
ListCommonPerf.default 708 8762 0.08:1
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 127 103 1.23:1
Tree60WithListItems.default 226 192 1.18:1
AlertMinimalPerf.default 653 564 1.16:1
HeaderMinimalPerf.default 484 416 1.16:1
ImageMinimalPerf.default 240 213 1.13:1
ListMinimalPerf.default 298 264 1.13:1
LayoutMinimalPerf.default 537 481 1.12:1
StatusMinimalPerf.default 241 215 1.12:1
Button.Fluent 122 109 1.12:1
HierarchicalTreeMinimalPerf.default 811 734 1.1:1
AttachmentMinimalPerf.default 1062 981 1.08:1
AttachmentSlotsPerf.default 3677 3423 1.07:1
HeaderSlotsPerf.default 1399 1311 1.07:1
DialogMinimalPerf.default 1897 1797 1.06:1
IconMinimalPerf.default 299 282 1.06:1
Dropdown.Fluent 3344 3159 1.06:1
AccordionMinimalPerf.default 199 189 1.05:1
LabelMinimalPerf.default 799 764 1.05:1
MenuButtonMinimalPerf.default 1457 1393 1.05:1
Text.Fluent 255 243 1.05:1
TooltipMinimalPerf.default 843 809 1.04:1
TreeMinimalPerf.default 845 813 1.04:1
Slider.Fluent 1455 1399 1.04:1
ButtonSlotsPerf.default 610 594 1.03:1
ChatWithPopoverPerf.default 755 736 1.03:1
ProviderMinimalPerf.default 533 518 1.03:1
RefMinimalPerf.default 148 144 1.03:1
Tooltip.Fluent 691 674 1.03:1
PopupMinimalPerf.default 329 323 1.02:1
SegmentMinimalPerf.default 1214 1190 1.02:1
CustomToolbarPrototype.default 3518 3457 1.02:1
CheckboxMinimalPerf.default 4263 4208 1.01:1
EmbedMinimalPerf.default 6409 6371 1.01:1
ProviderMergeThemesPerf.default 1027 1017 1.01:1
SliderMinimalPerf.default 1384 1370 1.01:1
Checkbox.Fluent 764 754 1.01:1
ChatDuplicateMessagesPerf.default 604 607 1:1
DropdownManyItemsPerf.default 456 457 1:1
ItemLayoutMinimalPerf.default 1626 1632 1:1
ReactionMinimalPerf.default 2346 2343 1:1
SplitButtonMinimalPerf.default 10886 10938 1:1
Avatar.Fluent 922 918 1:1
InputMinimalPerf.default 867 872 0.99:1
TextAreaMinimalPerf.default 2821 2856 0.99:1
Icon.Fluent 545 548 0.99:1
FormMinimalPerf.default 949 972 0.98:1
MenuMinimalPerf.default 1787 1818 0.98:1
AnimationMinimalPerf.default 481 496 0.97:1
RadioGroupMinimalPerf.default 382 392 0.97:1
Dialog.Fluent 1522 1577 0.97:1
AvatarMinimalPerf.default 518 539 0.96:1
TextMinimalPerf.default 245 255 0.96:1
ToolbarMinimalPerf.default 687 723 0.95:1
VideoMinimalPerf.default 646 690 0.94:1
ChatMinimalPerf.default 1955 2103 0.93:1
Image.Fluent 221 238 0.93:1
GridMinimalPerf.default 816 887 0.92:1
FlexMinimalPerf.default 328 359 0.91:1
DropdownMinimalPerf.default 3848 4267 0.9:1
TableMinimalPerf.default 543 604 0.9:1
CarouselMinimalPerf.default 1911 2158 0.89:1
LoaderMinimalPerf.default 2005 2337 0.86:1
BoxMinimalPerf.default 239 284 0.84:1
PortalMinimalPerf.default 226 268 0.84:1
DividerMinimalPerf.default 848 1018 0.83:1

Generated by 🚫 dangerJS

packages/react-context-selector/src/createContext.ts Outdated Show resolved Hide resolved
packages/react-context-selector/src/createContext.ts Outdated Show resolved Hide resolved
}
},
})
[actions],
Copy link
Member

Choose a reason for hiding this comment

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

Having actions as the only dependency means you can get stale props in onSelectedIndexChange cb.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yep, you're totally right. I will tackle this separately

packages/react/src/components/List/context.ts Outdated Show resolved Hide resolved
packages/react/src/components/List/context.ts Outdated Show resolved Hide resolved
packages/react-context-selector/src/useContextSelectors.ts Outdated Show resolved Hide resolved
packages/react-context-selector/package.json Outdated Show resolved Hide resolved
packages/react-context-selector/package.json Outdated Show resolved Hide resolved
variables,
} = props

const parentProps = useContextSelectors(ListContext, {
Copy link
Member

Choose a reason for hiding this comment

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

The typings does not seem to be strict enough to allow only the valid keys and values.
Let's verify it together offline.

…m/stardust-ui/react into proto/list-context

� Conflicts:
�	packages/react-context-selector/README.md
�	packages/react-context-selector/package.json
�	packages/react-context-selector/src/createContext.ts
�	packages/react-context-selector/src/index.ts
�	packages/react-context-selector/src/types.ts
�	packages/react-context-selector/src/useContextSelector.ts
�	packages/react-context-selector/src/useContextSelectors.ts
�	packages/react-context-selector/test/createContext-test.tsx
@layershifter layershifter changed the title Prototype: Context usage for collections feat(List): add proper support for children API Feb 12, 2020
@layershifter layershifter marked this pull request as ready for review February 13, 2020 11:25
…m/stardust-ui/react into proto/list-context

� Conflicts:
�	docs/src/examples/components/List/Performance/index.tsx
�	packages/react-bindings/src/hooks/useStateManager.ts
�	packages/react-bindings/test/hooks/useAutoControlled-test.tsx
�	packages/react-bindings/test/hooks/useStateManager-test.tsx
@layershifter layershifter merged commit 9cd7d54 into master Feb 14, 2020
@layershifter layershifter deleted the proto/list-context branch February 14, 2020 12:49
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants