[TreeView] Fix hydration error

mui · Oct 17, 2024 · a58814d · a58814d
1 parent 54cde58
commit a58814d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.ts
@@ -8,11 +8,9 @@ export const useTreeViewId: TreeViewPlugin<UseTreeViewIdSignature> = ({
   state,
   setState,
 }) => {
-  const treeId = state.id.treeId;
-
   React.useEffect(() => {
     setState((prevState) => {
-      if (prevState.id.treeId === params.id) {
+      if (params.id === prevState.id.providedTreeId && prevState.id.treeId !== undefined) {
         return prevState;
       }
 
@@ -23,6 +21,8 @@ export const useTreeViewId: TreeViewPlugin<UseTreeViewIdSignature> = ({
     });
   }, [setState, params.id]);
 
+  const treeId = state.id.treeId ?? state.id.providedTreeId;
+
   return {
     getRootProps: () => ({
       id: treeId,
@@ -37,4 +37,4 @@ useTreeViewId.params = {
   id: true,
 };
 
-useTreeViewId.getInitialState = ({ id }) => ({ id: { treeId: id ?? createTreeViewDefaultId() } });
+useTreeViewId.getInitialState = ({ id }) => ({ id: { treeId: undefined, providedTreeId: id } });
diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.types.ts
@@ -12,7 +12,8 @@ export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 
 export interface UseTreeViewIdState {
   id: {
-    treeId: string;
+    treeId: string | undefined;
+    providedTreeId: string | undefined;
   };
 }