[data grid] Broken Memoization

[walston]

Steps to reproduce

Link to live example: codesandbox.io: Broken Memoization

Steps:

1. click "Add column" Edit the new column "b"
2. note the data in the <pre> tag matches row
3. click "Clear table"
4. note the reset of data displayed in <pre>
5. click "Add column" again
6. note the data in <pre> shows an empty "b"
7. note that the table displays the previous value that has been cleared and is not in data

Current behavior

DataGridPro persists data that has been removed from the array being passed to it

Expected behavior

DataGridPro reflects data passed in as props

Context

We're making an editable table that will be sent to a backend api. This issue makes it impossible to keep UI and data in sync.

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.0 Binaries: Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm Browsers: Chrome: 118.0.5993.117 Edge: Not Found Safari: 17.0 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.20 @mui/core-downloads-tracker: 5.14.8 @mui/icons-material: ^5.14.15 => 5.14.15 @mui/lab: ^5.0.0-alpha.104 => 5.0.0-alpha.104 @mui/material: ^5.14.8 => 5.14.8 @mui/private-theming: 5.14.15 @mui/styled-engine: 5.14.15 @mui/styles: ^5.14.7 => 5.14.7 @mui/system: ^5.14.15 => 5.14.15 @mui/types: 7.2.7 @mui/utils: 5.14.15 @mui/x-data-grid: 6.16.2 @mui/x-data-grid-pro: ^6.16.2 => 6.16.2 @mui/x-date-pickers: 6.16.2 @mui/x-date-pickers-pro: ^6.16.2 => 6.16.2 @mui/x-license-pro: ^6.10.2 => 6.10.2 @types/react: ^17.0.2 => 17.0.44 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: 5.0.4 => 5.0.4 ```

Search keywords: DataGridPro stale data editable table Order ID: Order #55292

[JohannesByle]

I think this might be the same issue I ran into #10864

[DanailH]

@walston you can check more about your problem in this comment: https://github.com/mui/mui-x/issues/10864#issuecomment-1788754022. Your need to use the data grid column API if you want to alter the initially loaded columns.

[walston]

Okay... I see the suggestion to use useGridApiRef, but that does seem to be broken.

https://codesandbox.io/s/broken-memoization-fvrtz9?file=/src/DemoTable.tsx

it doesn't really seem to have any effect on the memoized row data though.

[JohannesByle]

@DanailH I don't think it's correct that you need to use the apiRef to alter columns. As stated in the docs, the only danger to changing the columns after render is that you lose non-tracked state: "you take the risk of losing elements like column width or order." The grid not reflecting the state passed in as props is always a bug. If you had to make all changes using the apiRef it would only be possible in a useEffect, which seems like an anti-pattern.

[romgrk]

May be linked to #10895

[walston]

As a hack/work-around a co-worker suggested adding a unique key prop to the DataGrid element. This works but is definitely not performant.

<DataGridPro
  key={ JSON.stringify(rows) }
  />

[scamden]

As a hack/work-around a co-worker suggested adding a unique key prop to the DataGrid element. This works but is definitely not performant.

<DataGridPro
  key={ JSON.stringify(rows) }
  />

ya that's my current workaround except using the deps of the colDef we care about as the values to stringify for the key