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

GroupedList: Fixing issue where paging new data into existing groups did not trigger re-render #15628

Merged
merged 2 commits into from
Oct 21, 2020

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented Oct 21, 2020

Pull request checklist

Description of changes

Cherry-pick of #15335.

Original PR description:

Reworked the logic in the new getDerivedStateFromProps function in GroupedList so it properly re-renders the List if any of the dependent props change. This fixes an issue where updating only the items would not actually trigger a re-render because they were not explicitly passed as props to the child List components.

Focus areas to test

Added a new unit test to validate updating the items in-place with the same groupings, using some placeholders to simulate paging.

@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 2df401d:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 830 835 5000
BaseButtonCompat mount 881 880 5000
Breadcrumb mount 160031 159084 5000
Checkbox mount 1473 1516 5000
CheckboxBase mount 1248 1250 5000
ChoiceGroup mount 4726 4659 5000
ComboBox mount 935 947 1000
CommandBar mount 21761 21749 1000
ContextualMenu mount 6078 6014 1000
DefaultButtonCompat mount 1123 1135 5000
DetailsRow mount 3565 3647 5000
DetailsRowFast mount 3625 3609 5000
DetailsRowNoStyles mount 3430 3432 5000
Dialog mount 1470 1522 1000
DocumentCardTitle mount 1812 1852 1000
Dropdown mount 3393 3391 5000
FocusTrapZone mount 1790 1827 5000
FocusZone mount 1836 1836 5000
IconButtonCompat mount 1876 1719 5000
Label mount 332 329 5000
Layer mount 1811 1806 5000
Link mount 447 457 5000
MenuButtonCompat mount 1440 1516 5000
MessageBar mount 2028 2089 5000
Nav mount 3256 3248 1000
OverflowSet mount 1045 1029 5000
Panel mount 1471 1422 1000
Persona mount 866 866 1000
Pivot mount 1364 1389 1000
PrimaryButtonCompat mount 1277 1283 5000
Rating mount 7507 7406 5000
SearchBox mount 1315 1311 5000
Shimmer mount 2502 2522 5000
Slider mount 1863 1886 5000
SpinButton mount 4958 5001 5000
Spinner mount 434 415 5000
SplitButtonCompat mount 3112 3128 5000
Stack mount 486 497 5000
StackWithIntrinsicChildren mount 1505 1498 5000
StackWithTextChildren mount 4576 4597 5000
SwatchColorPicker mount 10132 10144 5000
TagPicker mount 2712 2757 5000
TeachingBubble mount 11434 11450 5000
Text mount 429 426 5000
TextField mount 1337 1354 5000
ThemeProvider mount 2001 2000 5000
ThemeProvider virtual-rerender 639 657 5000
Toggle mount 814 794 5000
button mount 570 555 5000
buttonNative mount 124 112 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.45 0.5 0.9:1 2000 896
🦄 Button.Fluent 0.11 0.22 0.5:1 5000 572
🔧 Checkbox.Fluent 0.66 0.34 1.94:1 1000 663
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 804
🔧 Dropdown.Fluent 2.96 0.42 7.05:1 1000 2961
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 700
🦄 Image.Fluent 0.08 0.13 0.62:1 5000 406
🔧 Slider.Fluent 1.6 0.46 3.48:1 1000 1602
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 359
🦄 Tooltip.Fluent 0.12 0.9 0.13:1 5000 579

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 181 163 1.11:1
ButtonMinimalPerf.default 188 175 1.07:1
AlertMinimalPerf.default 312 296 1.05:1
SegmentMinimalPerf.default 383 366 1.05:1
AttachmentSlotsPerf.default 1177 1136 1.04:1
BoxMinimalPerf.default 387 371 1.04:1
ChatMinimalPerf.default 660 635 1.04:1
LayoutMinimalPerf.default 439 423 1.04:1
PortalMinimalPerf.default 174 168 1.04:1
RadioGroupMinimalPerf.default 463 444 1.04:1
AnimationMinimalPerf.default 432 420 1.03:1
AvatarMinimalPerf.default 480 466 1.03:1
GridMinimalPerf.default 374 362 1.03:1
ListCommonPerf.default 664 642 1.03:1
SkeletonMinimalPerf.default 445 433 1.03:1
SliderMinimalPerf.default 1659 1618 1.03:1
Image.Fluent 406 396 1.03:1
ButtonUseCssNestingPerf.default 1102 1081 1.02:1
CheckboxMinimalPerf.default 2919 2865 1.02:1
HeaderMinimalPerf.default 395 387 1.02:1
ImageMinimalPerf.default 409 400 1.02:1
ItemLayoutMinimalPerf.default 1316 1285 1.02:1
LabelMinimalPerf.default 458 448 1.02:1
MenuMinimalPerf.default 908 889 1.02:1
PopupMinimalPerf.default 724 712 1.02:1
ProviderMergeThemesPerf.default 2154 2102 1.02:1
RefMinimalPerf.default 250 246 1.02:1
TextMinimalPerf.default 379 371 1.02:1
ToolbarMinimalPerf.default 982 959 1.02:1
TooltipMinimalPerf.default 831 812 1.02:1
Checkbox.Fluent 663 650 1.02:1
ButtonSlotsPerf.default 608 601 1.01:1
DividerMinimalPerf.default 390 385 1.01:1
InputMinimalPerf.default 1327 1320 1.01:1
LoaderMinimalPerf.default 754 749 1.01:1
StatusMinimalPerf.default 753 742 1.01:1
IconMinimalPerf.default 677 669 1.01:1
TreeMinimalPerf.default 903 891 1.01:1
Avatar.Fluent 896 884 1.01:1
Dialog.Fluent 804 798 1.01:1
Tooltip.Fluent 579 571 1.01:1
ChatDuplicateMessagesPerf.default 422 422 1:1
DropdownManyItemsPerf.default 763 763 1:1
DropdownMinimalPerf.default 2973 2977 1:1
EmbedMinimalPerf.default 1944 1947 1:1
FormMinimalPerf.default 430 430 1:1
ListMinimalPerf.default 501 500 1:1
ListWith60ListItems.default 950 947 1:1
MenuButtonMinimalPerf.default 1572 1579 1:1
ProviderMinimalPerf.default 1046 1041 1:1
SplitButtonMinimalPerf.default 3823 3831 1:1
CustomToolbarPrototype.default 4003 3985 1:1
Button.Fluent 572 571 1:1
Dropdown.Fluent 2961 2947 1:1
Icon.Fluent 700 703 1:1
Slider.Fluent 1602 1596 1:1
ButtonOverridesMissPerf.default 1737 1763 0.99:1
ChatWithPopoverPerf.default 479 483 0.99:1
DialogMinimalPerf.default 801 806 0.99:1
HeaderSlotsPerf.default 792 798 0.99:1
TableManyItemsPerf.default 2149 2166 0.99:1
Text.Fluent 359 363 0.99:1
CardMinimalPerf.default 566 576 0.98:1
CarouselMinimalPerf.default 466 477 0.98:1
FlexMinimalPerf.default 318 323 0.98:1
TextAreaMinimalPerf.default 483 491 0.98:1
VideoMinimalPerf.default 636 646 0.98:1
ListNestedPerf.default 580 597 0.97:1
ReactionMinimalPerf.default 417 428 0.97:1
TreeWith60ListItems.default 212 218 0.97:1
AccordionMinimalPerf.default 157 163 0.96:1
ButtonUseCssPerf.default 828 859 0.96:1
TableMinimalPerf.default 417 447 0.93:1

@size-auditor
Copy link

size-auditor bot commented Oct 21, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-GroupedList 117.819 kB 117.915 kB ExceedsBaseline     96 bytes
office-ui-fabric-react fluentui-react-DetailsList 208.374 kB 208.47 kB ExceedsBaseline     96 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 218.685 kB 218.781 kB ExceedsBaseline     96 bytes

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

Baseline commit: 3545f576557f05a2d907eaf07a7ae56dd16ae925 (build)

@msft-github-bot
Copy link
Contributor

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot msft-github-bot merged commit 3bfeb5a into microsoft:master Oct 21, 2020
@khmakoto khmakoto deleted the groupReRender branch October 21, 2020 15:55
@msft-github-bot
Copy link
Contributor

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

SethDonohue pushed a commit to SethDonohue/fluentui that referenced this pull request Nov 2, 2020
…did not trigger re-render (microsoft#15628)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See microsoft#15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

_Cherry-pick of microsoft#15335._

_Original PR description:_

Reworked the logic in the new `getDerivedStateFromProps` function in `GroupedList` so it properly re-renders the `List` if any of the dependent props change. This fixes an issue where updating only the `items` would not actually trigger a re-render because they were not explicitly passed as props to the child `List` components.

#### Focus areas to test

Added a new unit test to validate updating the `items` in-place with the same groupings, using some placeholders to simulate paging.
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.

4 participants