mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.12k stars 1.28k forks source link

[data grid] Performance: data grid spends about half the time sorting and filtering even though the features are disabled #11910

Open scamden opened 8 months ago

scamden commented 8 months ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/datagrid-huge-tree-shared-with-mui-forked-lf9gz3

Steps:

  1. Start perf trace
  2. Mount the grid
  3. Sto the trace

Current behavior

About half the time is spent filtering and sorting despite it being disabled

Screenshot 2024-02-01 at 4 01 55 PM

Expected behavior

no time is spent sorting or filtering when it's disabled

Context

Increase performance on a very large data grid

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.3 Binaries: Node: 18.12.1 - ~/.nodenv/versions/18.12.1/bin/node npm: 8.5.1 - ~/.nodenv/versions/18.12.1/bin/npm pnpm: 8.14.1 - ~/.nodenv/versions/18.12.1/bin/pnpm Browsers: Chrome: 121.0.6167.139 Edge: Not Found Safari: 17.3 npmPackages: @emotion/react: 11.9.3 @emotion/styled: 11.9.3 @mui/base: 5.0.0-alpha.87 @mui/core-downloads-tracker: 5.14.18 @mui/icons-material: 5.14.18 @mui/lab: 5.0.0-alpha.88 @mui/material: 5.14.18 @mui/private-theming: 5.14.18 @mui/styled-engine: 5.14.18 @mui/styles: 5.14.18 @mui/system: 5.14.18 @mui/types: 7.2.9 @mui/utils: 5.14.18 @mui/x-data-grid: 6.19.2 @mui/x-data-grid-premium: 6.19.2 @mui/x-data-grid-pro: 6.19.2 @mui/x-date-pickers: 5.0.8 @mui/x-date-pickers-pro: 5.0.20 @mui/x-license-pro: 5.13.1 @types/react: 18.0.18 react: 18.2.0 react-dom: 18.2.0 typescript: 5.3.2 => 5.3.2 ```

Search keywords: performance data filter sort Order ID: 77647

michelengelen commented 8 months ago

Thanks @scamden for reporting this ... I have put it on our board for the team to have a look!

romgrk commented 7 months ago

The disableXxxx flags aren't meant to fully disable a feature, they fullfill the same role as the input[disabled] attribute: the feature is UI disabled only, but still present. All the grid flags are going to be UI-disable only, this is being clarified in v7.

However, we should be able to avoid the performance cost in some cases.

For filtering, we can avoid filtering if:

One issue we have though is that we create a filteredRowsLookup which has the structure { [id: GridRowId]: boolean | undefined }, and we set the value to true for all rows. So we have a cost that scales as O(n). Some of this could be avoided by the work in #10068 I think. We should probably also have a special Set value that allows us to encode "everything" without having to explicitly set each value, it would save runtime & memory costs. Something like this:

enum RowSet {
  All,
  Some(Set<GridRowId>)
}

For sorting, I have no idea what can be done, I haven't touched that part of the codebase yet.