[data grid] Default theme props degrade performance

[LinnaViljami]

Duplicates

• [data grid] Cells are rerendered on every click #7807

Steps to reproduce 🕹

Link to live example:

https://codesandbox.io/s/react-typescript-forked-xddwq4?file=/src/App.tsx

Steps:

1. Click row
2. Check react profiler. Every row is rendered causing lagging performance.

Current behavior 😯

On click the whole grid is rerendered, including every row and header. This causes significant delay when rendering for example up to 20 rows with 10 columns = 200 cells

Expected behavior 🤔

Only rows which selection changes should be rerendered. No headers should be rerendered

Context 🔦

Row selection performance is not good enough

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID or Support key 💳 (optional)

72822

[romgrk]

You have clicked the "I have tested with the latest version" checkbox but it seems that you're not. Can you test with the latest version and confirm? This should be fixed.

[LinnaViljami]

I updated the latest packages now.

With react profilier we can see, that row rerendering is partially memorized. Headers are still all rerendered causing problems with large amounts. (for example 6ms per header causing significant lag if more than 10 headers)

I tested it out with 11 headers and 18 rows. The render time of the headers was 56,7ms, which happens on every row click. The render time of the rows was 24,5ms.

Here is the simplified profiler result with 2 columns and 8 rows

[kealjones-wk]

I just ran into this issue, with a bit of debugging I realized that this (at least for me) is caused by the presence of a custom theme specifying a defaultProps for MuiDataGrid.

Replicated here: https://codesandbox.io/s/focused-bas-rjzts7?file=/src/index.tsx:460-488

[romgrk]

For some reason that sandbox is stuck in loading state for me, so I can't inspect that code.

Any prop that isn't a primitive or memoized can cause re-renders, e.g. the initialState inline object changes on each render so it can cause some re-rendering:

<DataGrid initialState={{ a: 1 }} />

More details here: https://mui.com/x/react-data-grid/performance/

[kealjones-wk]

@romgrk Idk why that code sandbox is broke sorry about that, anyway i re-created it here: https://stackblitz.com/edit/react-mxv54z?file=index.tsx This and the previous code sandbox are forks of that exact same link you gave: https://mui.com/x/react-data-grid/performance/#visualization The only difference is the customTheme and ThemeProvider in index.tsx.