Remove the hack thanks to mui#19697

Author: MBilalShafi

docs/data/data-grid/tree-data/TreeDataSyncRowData.js

@@ -101,25 +101,6 @@ export default function TreeDataSyncRowData() {
   const [rows, setRows] = React.useState(initialRows);
   const [loading, setLoading] = React.useState(false);
 
-  // WORKAROUND: To persist the expanded parents across re-renders
-  // Context: https://github.com/mui/mui-x/issues/210#issuecomment-1006411492
-  const expandedParents = React.useRef(new Set([]));
-
-  const isGroupExpandedByDefault = React.useCallback((node) => {
-    return expandedParents.current.has(node.id);
-  }, []);
-
-  React.useEffect(() => {
-    return apiRef.current?.subscribeEvent('rowExpansionChange', (node) => {
-      if (node.childrenExpanded) {
-        expandedParents.current.add(node.id);
-      } else {
-        expandedParents.current.delete(node.id);
-      }
-    });
-  }, [apiRef]);
-  // WORKAROUND ends here
-
   const handleRowOrderChange = React.useCallback(() => {
     setLoading(true);
     const updatedOrderedDataRows = gridOrderedDataRowsSelector(apiRef);
@@ -140,7 +121,6 @@ export default function TreeDataSyncRowData() {
         treeData
         rowReordering
         disableRowSelectionOnClick
-        isGroupExpandedByDefault={isGroupExpandedByDefault}
         onRowOrderChange={handleRowOrderChange}
         getTreeDataPath={getTreeDataPath}
         setTreeDataPath={setTreeDataPath}

docs/data/data-grid/tree-data/TreeDataSyncRowData.tsx

@@ -105,25 +105,6 @@ export default function TreeDataSyncRowData() {
   const [rows, setRows] = React.useState<GridValidRowModel[]>(initialRows);
   const [loading, setLoading] = React.useState(false);
 
-  // WORKAROUND: To persist the expanded parents across re-renders
-  // Context: https://github.com/mui/mui-x/issues/210#issuecomment-1006411492
-  const expandedParents = React.useRef<Set<GridRowId>>(new Set([]));
-
-  const isGroupExpandedByDefault = React.useCallback((node: GridGroupNode) => {
-    return expandedParents.current.has(node.id);
-  }, []);
-
-  React.useEffect(() => {
-    return apiRef.current?.subscribeEvent('rowExpansionChange', (node) => {
-      if (node.childrenExpanded) {
-        expandedParents.current.add(node.id);
-      } else {
-        expandedParents.current.delete(node.id);
-      }
-    });
-  }, [apiRef]);
-  // WORKAROUND ends here
-
   const handleRowOrderChange: DataGridProProps['onRowOrderChange'] =
     React.useCallback(() => {
       setLoading(true);
@@ -145,7 +126,6 @@ export default function TreeDataSyncRowData() {
         treeData
         rowReordering
         disableRowSelectionOnClick
-        isGroupExpandedByDefault={isGroupExpandedByDefault}
         onRowOrderChange={handleRowOrderChange}
         getTreeDataPath={getTreeDataPath}
         setTreeDataPath={setTreeDataPath}

docs/data/data-grid/tree-data/TreeDataSyncRowData.tsx.preview

@@ -6,7 +6,6 @@
   treeData
   rowReordering
   disableRowSelectionOnClick
-  isGroupExpandedByDefault={isGroupExpandedByDefault}
   onRowOrderChange={handleRowOrderChange}
   getTreeDataPath={getTreeDataPath}
   setTreeDataPath={setTreeDataPath}

docs/data/data-grid/tree-data/tree-data.md

@@ -197,12 +197,6 @@ If you want to update the external row data, for example to persist it in the lo
 
 {{"demo": "TreeDataSyncRowData.js", "bg": "inline", "defaultCodeOpen": false}}
 
-:::warning
-Syncing the external rows and providing a fresh [rows prop](/x/react-data-grid/row-updates/#the-rows-prop) reference causes a full tree regeneration, whose one side effect is that the expanded rows state will be lost.
-
-To persist the expanded rows state, you can use the `isGroupExpandedByDefault()` callback with a dictionary, as done in the above demo.
-:::
-
 ## Lazy-loading tree data children
 
 See [Server-side data—Tree data](/x/react-data-grid/server-side-data/tree-data/) for details on lazy-loading tree data children.