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: DataGrid selection performance improvement #30288

Merged
merged 2 commits into from
Jan 12, 2024

Conversation

ling1726
Copy link
Member

@ling1726 ling1726 commented Jan 11, 2024

Improves context selector usage and memoization so that a selected row will only re-render itself and not the entire grid.

Before:
image

After:
image

Fixes #29908 when #30289

Improves context selector usage and memoization so that a selected row
will only re-render itself and not the entire grid.

Before:

After:
![image](https://github.com/microsoft/fluentui/assets/20744592/38490bbc-3c63-4247-977b-7bb7883f31bd)

Fixes partially microsoft#29908
@ling1726 ling1726 marked this pull request as ready for review January 11, 2024 11:23
@ling1726 ling1726 requested a review from a team as a code owner January 11, 2024 11:23
@fabricteam
Copy link
Collaborator

fabricteam commented Jan 11, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 623 619 5000
Button mount 306 303 5000
Field mount 1135 1140 5000
FluentProvider mount 697 716 5000
FluentProviderWithTheme mount 81 81 10
FluentProviderWithTheme virtual-rerender 65 65 10
FluentProviderWithTheme virtual-rerender-with-unmount 82 81 10
MakeStyles mount 850 848 50000
Persona mount 1715 1671 5000
SpinButton mount 1430 1388 5000

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 dd9f6ea:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration
wonderful-keldysh-rv9q7v Issue #29908

Copy link

size-auditor bot commented Jan 11, 2024

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 38b6a76ef54c02106cf10d989922fbcc9d2cfb31 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 11, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

@ling1726
Copy link
Member Author

/azp run

Copy link

Azure Pipelines successfully started running 4 pipeline(s).

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-table
DataGrid
156.941 kB
43.864 kB
157.291 kB
43.928 kB
350 B
64 B
react-table
Table as DataGrid
130.161 kB
35.124 kB
130.25 kB
35.146 kB
89 B
22 B
react-table
Table (Selection only)
75.338 kB
20.36 kB
75.365 kB
20.367 kB
27 B
7 B
react-table
Table (Sort only)
73.945 kB
19.949 kB
74.031 kB
19.976 kB
86 B
27 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.901 kB
20.261 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
210.423 kB
60.027 kB
react-components
react-components: FluentProvider & webLightTheme
42.388 kB
14.103 kB
react-portal-compat
PortalCompatProvider
7.099 kB
2.385 kB
react-table
Table (Primitives only)
44.493 kB
13.921 kB
🤖 This report was generated against 38b6a76ef54c02106cf10d989922fbcc9d2cfb31

@ling1726 ling1726 merged commit 50176a6 into microsoft:master Jan 12, 2024
24 checks passed
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.

[Bug]:DataGrid select/de-select is slow with 100+ records.
3 participants