[docs] Polish data grid state support (mui#11264)

docs/data/data-grid/state/RestoreStateApiRef.js

@@ -133,10 +133,10 @@ function NewViewListButton(props) {
   const { label, onLabelChange, onSubmit, isValid } = props;
   const [isAddingView, setIsAddingView] = React.useState(false);
 
-  const handleSubmitForm = (e) => {
+  const handleSubmitForm = (event) => {
     onSubmit();
     setIsAddingView(false);
-    e.preventDefault();
+    event.preventDefault();
   };
 
   return (

docs/data/data-grid/state/RestoreStateApiRef.tsx

@@ -160,18 +160,18 @@ function ViewListItem(props: {
 function NewViewListButton(props: {
   label: string;
   onLabelChange: (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void;
   onSubmit: () => void;
   isValid: boolean;
 }) {
   const { label, onLabelChange, onSubmit, isValid } = props;
   const [isAddingView, setIsAddingView] = React.useState(false);
 
-  const handleSubmitForm: React.FormEventHandler = (e) => {
+  const handleSubmitForm: React.FormEventHandler = (event) => {
     onSubmit();
     setIsAddingView(false);
-    e.preventDefault();
+    event.preventDefault();
   };
 
   return (

docs/data/data-grid/state/RestoreStateInitialState.js

@@ -46,7 +46,6 @@ export default function RestoreStateInitialState() {
 
   const syncState = React.useCallback((newInitialState) => {
     setSavedState((prev) => ({
-      ...prev,
       count: prev.count + 1,
       initialState: newInitialState,
     }));

docs/data/data-grid/state/RestoreStateInitialState.tsx

@@ -51,7 +51,6 @@ export default function RestoreStateInitialState() {
 
   const syncState = React.useCallback((newInitialState: GridInitialState) => {
     setSavedState((prev) => ({
-      ...prev,
       count: prev.count + 1,
       initialState: newInitialState,
     }));

docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx

@@ -2,8 +2,11 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium';
-import { GridInitialStatePremium } from '@mui/x-data-grid-premium/models/gridStatePremium';
+import {
+  GridInitialState,
+  DataGridPremium,
+  useGridApiRef,
+} from '@mui/x-data-grid-premium';
 
 export default function SaveAndRestoreStateInitialState() {
   const apiRef = useGridApiRef();
@@ -13,7 +16,7 @@ export default function SaveAndRestoreStateInitialState() {
     maxColumns: 10,
   });
 
-  const [initialState, setInitialState] = React.useState<GridInitialStatePremium>();
+  const [initialState, setInitialState] = React.useState<GridInitialState>();
 
   const saveSnapshot = React.useCallback(() => {
     if (apiRef?.current?.exportState && localStorage) {

docs/data/data-grid/state/state.md

@@ -85,18 +85,22 @@ But if the callback is not defined or if calling it does not update the prop val
 ### Restore the state with initialState
 
 You can pass the state returned by `apiRef.current.exportState()` to the `initialState` prop.
+
 In the demo below, clicking on **Recreate the 2nd grid** will re-mount the second Data Grid with the current state of the first Grid.
 
+{{"demo": "RestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
+
 :::warning
 If you restore the page using `initialState` before the data is fetched, the Data Grid will automatically move to the first page.
 :::
 
-{{"demo": "RestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
-
 ### Save and restore the state from external storage
 
-You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (e.g. using `localStorage` or `redux`).
-This way the state can be persisted on refresh or navigating to another page. This is done by listening on the `beforeunload` event.
+You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (e.g. using local storage or redux).
+This way the state can be persisted on refresh or navigating to another page.
+
+In the following demo, the state is saved to `localStorage` and restored when the page is refreshed.
+This is done by listening on the `beforeunload` event.
 When the component is unmounted, the `useLayoutEffect` cleanup function is being used instead.
 
 {{"demo": "SaveAndRestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}}