[data grid] Saved state from localStorage will not restore on page reload or page navigate

[kmamcor]

Steps to reproduce

Link to live example: (required)

Steps:

1. Start with the demo from https://mui.com/x/react-data-grid/state/#save-and-restore-the-state-from-external-storage
2. Add a parent component to fetch the data that needs passed into the DataGrid (Premium)
3. Load the page and alter the state of the grid (hide one column, or change the width of a column)
4. Refresh the page and see column state not restore correctly

Current behavior

When copied/pasted directly from the docs, it works with Demo Data. The demo has been expanded to be a reusable DataGrid with this behavior. However, as soon as you make the example component a child component with columns, rows, and other attributes as props passed in from the parent/page, the state of the grid does not restore.

Expected behavior

State should restore on load/mount. Column visibility, dimensions, order, etc.

Context

Create a reusable DataGrid implementation for varying sets of data/use cases. Each use case will also pass in a key/id to use as the localStorage key for retrieving the stored state.

Your environment

Using Chrome and/or Edge

npx @mui/envinfo

    System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD    
    pnpm: Not Found
  Browsers:
    Chrome: Version 126.0.6478.127
    Edge: Chromium (126.0.2592.113)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.16.4
    @mui/icons-material: ^5.16.0 => 5.16.0
    @mui/lab: ^5.0.0-alpha.171 => 5.0.0-alpha.171
    @mui/material: ^5.16.4 => 5.16.4
    @mui/private-theming:  5.16.4
    @mui/styled-engine:  5.16.4
    @mui/system:  5.16.4
    @mui/types:  7.2.15
    @mui/utils:  5.16.4
    @mui/x-charts: ^7.11.0 => 7.11.0
    @mui/x-data-grid:  7.11.0
    @mui/x-data-grid-generator: ^7.11.0 => 7.11.0
    @mui/x-data-grid-premium: ^7.11.0 => 7.11.0
    @mui/x-data-grid-pro:  7.11.0
    @mui/x-date-pickers:  7.11.0
    @mui/x-date-pickers-pro: ^7.11.0 => 7.11.0
    @mui/x-internals:  7.11.0
    @mui/x-license: ^7.11.0 => 7.11.0
    @mui/x-tree-view: ^7.11.0 => 7.11.0
    @types/react:  18.0.29
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript:  5.0.2

Search keywords: DataGridPremium state restore save
Order ID: 80915

[michelengelen]

Hey @kadenmclawsAmcor
We are aware of this ... there seems to be a bug when applying the state back into the grid.
Related issue: #11576

I'll close this as a duplicate

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@kadenmclawsAmcor: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.