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

[DataGrid] Avoid allocations in hydrateRowsMeta #9121

Merged
merged 2 commits into from
May 29, 2023

Conversation

romgrk
Copy link
Contributor

@romgrk romgrk commented May 26, 2023

This PR avoids object allocations in hydrateRowsMeta. For large datasets, the costs are quite high. This is compounded by the fact that we create our objects with { ...spread }, and _objectSpread2 is very expensive.

The results below are obtained by clearing the filters in the same example as in #9120

Before After
Screenshot from 2023-05-25 22-45-53 Screenshot from 2023-05-25 22-42-43

@romgrk romgrk added performance component: data grid This is the name of the generic UI component, not the React module! labels May 26, 2023
@mui-bot
Copy link

mui-bot commented May 26, 2023

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-9121--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case Unit Min Max Median Mean σ
Filter 100k rows ms 597.9 1,032.5 729.3 831.84 151.736
Sort 100k rows ms 585.4 1,224.4 681.7 884.9 228.351
Select 100k rows ms 236.5 317.5 297.2 288.74 27.869
Deselect 100k rows ms 149.7 290.2 226.2 209.88 52.383

Generated by 🚫 dangerJS against 8ba57de

Comment on lines -147 to +154
const existingBaseSizes = Object.entries(sizes).reduce<Record<string, number>>(
(acc, [key, size]) => {
if (/^base[A-Z]/.test(key)) {
acc[key] = size;
}
return acc;
},
{},
);

// We use an object to make simple to check if a height is already added or not
const initialHeights: Record<string, number> = {
...existingBaseSizes,
baseCenter: baseRowHeight,
};
const initialHeights = {} as Record<string, number>;
/* eslint-disable-next-line no-restricted-syntax */
for (const key in sizes) {
if (/^base[A-Z]/.test(key)) {
initialHeights[key] = sizes[key];
}
}
initialHeights.baseCenter = baseRowHeight;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I love functionnal programming, but FP is always slower in JS :|

Copy link
Member

@MBilalShafi MBilalShafi left a comment

Choose a reason for hiding this comment

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

Nice improvement, it surely saves some ticks 👍
I agree mutation could be really useful for performance bumps.

@romgrk romgrk merged commit 8353ce5 into mui:master May 29, 2023
@romgrk romgrk deleted the perf-row-calculate-sizes branch May 29, 2023 14:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants