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

Fix issue in GroupedList where paging new data into existing groups did not re-render #15335

Merged
merged 4 commits into from
Oct 1, 2020

Conversation

ThomasMichon
Copy link
Member

Description of changes

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.

@msft-github-bot msft-github-bot added the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Oct 1, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 1, 2020

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 3a0e570:

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

msft-github-bot commented Oct 1, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 864 851 5000
BaseButton mount 916 944 5000
Breadcrumb mount 43119 43492 5000
ButtonNext mount 588 599 5000
Checkbox mount 1596 1578 5000
CheckboxBase mount 1364 1340 5000
ChoiceGroup mount 5065 5081 5000
ComboBox mount 932 949 1000
CommandBar mount 7972 7982 1000
ContextualMenu mount 16228 16332 1000
DefaultButton mount 1175 1127 5000
DetailsRow mount 3744 3781 5000
DetailsRowFast mount 3696 3816 5000
DetailsRowNoStyles mount 3581 3480 5000
Dialog mount 1500 1524 1000
DocumentCardTitle mount 1825 1827 1000
Dropdown mount 2647 2614 5000
FocusTrapZone mount 1725 1742 5000
FocusZone mount 1877 1858 5000
IconButton mount 1743 1788 5000
Label mount 364 358 5000
Layer mount 1980 1988 5000
Link mount 471 451 5000
MenuButton mount 1530 1497 5000
MessageBar mount 2092 2143 5000
Nav mount 3405 3330 1000
OverflowSet mount 1432 1442 5000
Panel mount 1481 1555 1000
Persona mount 845 906 1000
Pivot mount 1454 1490 1000
PrimaryButton mount 1324 1304 5000
Rating mount 7740 7732 5000
SearchBox mount 1362 1267 5000
Shimmer mount 2628 2660 5000
Slider mount 1548 1555 5000
SpinButton mount 4973 5167 5000
Spinner mount 462 433 5000
SplitButton mount 3233 3229 5000
Stack mount 538 528 5000
StackWithIntrinsicChildren mount 1925 1972 5000
StackWithTextChildren mount 4975 4975 5000
SwatchColorPicker mount 10623 10429 5000
TagPicker mount 2758 2719 5000
TeachingBubble mount 52602 51751 5000
Text mount 432 436 5000
TextField mount 1407 1397 5000
ThemeProvider mount 3240 3260 5000
ThemeProvider virtual-rerender 635 613 5000
Toggle mount 828 860 5000
button mount 139 137 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.5 0.94:1 2000 933
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 596
🔧 Checkbox.Fluent 0.68 0.38 1.79:1 1000 678
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 832
🔧 Dropdown.Fluent 3.13 0.51 6.14:1 1000 3132
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 743
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 409
🔧 Slider.Fluent 1.62 0.38 4.26:1 1000 1617
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 386
🦄 Tooltip.Fluent 0.12 22.01 0.01:1 5000 583

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AlertMinimalPerf.default 327 0 Infinity:1
AnimationMinimalPerf.default 428 0 Infinity:1
AttachmentMinimalPerf.default 180 0 Infinity:1
AvatarMinimalPerf.default 489 0 Infinity:1
BoxMinimalPerf.default 384 0 Infinity:1
ButtonOverridesMissPerf.default 1820 0 Infinity:1
ButtonSlotsPerf.default 634 0 Infinity:1
ButtonUseCssPerf.default 885 0 Infinity:1
ButtonUseCssNestingPerf.default 1142 0 Infinity:1
CardMinimalPerf.default 605 0 Infinity:1
CarouselMinimalPerf.default 477 0 Infinity:1
ChatDuplicateMessagesPerf.default 472 0 Infinity:1
ChatMinimalPerf.default 661 0 Infinity:1
ChatWithPopoverPerf.default 545 0 Infinity:1
CheckboxMinimalPerf.default 2986 0 Infinity:1
DialogMinimalPerf.default 834 0 Infinity:1
DividerMinimalPerf.default 397 0 Infinity:1
DropdownManyItemsPerf.default 773 0 Infinity:1
DropdownMinimalPerf.default 3113 0 Infinity:1
EmbedMinimalPerf.default 2006 0 Infinity:1
FlexMinimalPerf.default 317 0 Infinity:1
FormMinimalPerf.default 447 0 Infinity:1
GridMinimalPerf.default 385 0 Infinity:1
HeaderMinimalPerf.default 434 0 Infinity:1
HeaderSlotsPerf.default 855 0 Infinity:1
ImageMinimalPerf.default 425 0 Infinity:1
InputMinimalPerf.default 1388 0 Infinity:1
ItemLayoutMinimalPerf.default 1342 0 Infinity:1
LabelMinimalPerf.default 435 0 Infinity:1
LayoutMinimalPerf.default 441 0 Infinity:1
ListMinimalPerf.default 522 0 Infinity:1
ListNestedPerf.default 648 0 Infinity:1
ListWith60ListItems.default 969 0 Infinity:1
LoaderMinimalPerf.default 791 0 Infinity:1
MenuMinimalPerf.default 938 0 Infinity:1
PopupMinimalPerf.default 738 0 Infinity:1
PortalMinimalPerf.default 184 0 Infinity:1
RadioGroupMinimalPerf.default 488 0 Infinity:1
ReactionMinimalPerf.default 427 0 Infinity:1
RefMinimalPerf.default 260 0 Infinity:1
SegmentMinimalPerf.default 393 0 Infinity:1
SliderMinimalPerf.default 1629 0 Infinity:1
SplitButtonMinimalPerf.default 3952 0 Infinity:1
StatusMinimalPerf.default 781 0 Infinity:1
TableManyItemsPerf.default 2237 0 Infinity:1
TableMinimalPerf.default 438 0 Infinity:1
TextMinimalPerf.default 381 0 Infinity:1
TextAreaMinimalPerf.default 518 0 Infinity:1
CustomToolbarPrototype.default 4179 0 Infinity:1
ToolbarMinimalPerf.default 971 0 Infinity:1
TreeWith60ListItems.default 212 0 Infinity:1
VideoMinimalPerf.default 630 0 Infinity:1
Avatar.Fluent 933 0 Infinity:1
Button.Fluent 596 0 Infinity:1
Checkbox.Fluent 678 0 Infinity:1
Dialog.Fluent 832 0 Infinity:1
Dropdown.Fluent 3132 0 Infinity:1
Icon.Fluent 743 0 Infinity:1
Image.Fluent 409 0 Infinity:1
Slider.Fluent 1617 0 Infinity:1
Text.Fluent 386 0 Infinity:1
Tooltip.Fluent 583 0 Infinity:1
ProviderMergeThemesPerf.default 2188 1 2188:1
MenuButtonMinimalPerf.default 1645 1 1645:1
AttachmentSlotsPerf.default 1219 1 1219:1
ProviderMinimalPerf.default 1077 1 1077:1
TreeMinimalPerf.default 947 1 947:1
TooltipMinimalPerf.default 856 1 856:1
IconMinimalPerf.default 721 1 721:1
ListCommonPerf.default 680 1 680:1
SkeletonMinimalPerf.default 453 1 453:1
ButtonMinimalPerf.default 195 1 195:1
AccordionMinimalPerf.default 163 1 163:1

@size-auditor
Copy link

size-auditor bot commented Oct 1, 2020

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: d5b0802

Possible causes

  • The baseline build d5b0802 is broken
  • The Size Auditor run for the baseline build d5b0802 was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@msft-github-bot
Copy link
Contributor

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

Handy links:

msft-github-bot pushed a commit that referenced this pull request Oct 21, 2020
…did not trigger re-render (#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 #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 #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.
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.
@ecraig12345 ecraig12345 removed the needs cherry-pick Temporary label for PRs which may need to be cherry-picked to master label Jan 26, 2021
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.

5 participants