diff --git a/frontend/src/components/dir-view-mode/dir-views.js b/frontend/src/components/dir-view-mode/dir-views.js
index 75b5ace919..8e4431919f 100644
--- a/frontend/src/components/dir-view-mode/dir-views.js
+++ b/frontend/src/components/dir-view-mode/dir-views.js
@@ -1,14 +1,17 @@
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import TreeSection from '../tree-section';
 import { MetadataStatusManagementDialog, MetadataFaceRecognitionDialog, MetadataTreeView, useMetadata } from '../../metadata';
 import ExtensionPrompts from './extension-prompts';
-import { seafileAPI } from '../../utils/seafile-api';
 
 const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
+  const enableMetadataManagement = useMemo(() => {
+    if (currentRepoInfo.encrypted) return false;
+    return window.app.pageOptions.enableMetadataManagement;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [window.app.pageOptions.enableMetadataManagement, currentRepoInfo]);
 
-  const [enableMetadataManagement, setEnableMetadataManagement] = useState(false);
   const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
   const [showMetadataFaceRecognitionDialog, setShowMetadataFaceRecognitionDialog] = useState(false);
   const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition, navigation } = useMetadata();
@@ -23,16 +26,6 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
     return operations;
   }, [enableMetadataManagement, enableMetadata, currentRepoInfo]);
 
-  useEffect(() => {
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      if (res.data.encrypted) {
-        setEnableMetadataManagement(false);
-      } else {
-        setEnableMetadataManagement(window.app.pageOptions.enableMetadataManagement);
-      }
-    });
-  }, [repoID]);
-
   const moreOperationClick = useCallback((operationKey) => {
     switch (operationKey) {
       case 'extended-properties': {
diff --git a/frontend/src/metadata/hooks/metadata.js b/frontend/src/metadata/hooks/metadata.js
index 187908ae88..2c74897c04 100644
--- a/frontend/src/metadata/hooks/metadata.js
+++ b/frontend/src/metadata/hooks/metadata.js
@@ -1,17 +1,21 @@
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import metadataAPI from '../api';
 import { Utils } from '../../utils/utils';
 import toaster from '../../components/toast';
 import { gettext } from '../../utils/constants';
 import { PRIVATE_FILE_TYPE } from '../../constants';
 import { FACE_RECOGNITION_VIEW_ID } from '../constants';
-import { seafileAPI } from '../../utils/seafile-api';
 
 // This hook provides content related to seahub interaction, such as whether to enable extended attributes, views data, etc.
 const MetadataContext = React.createContext(null);
 
-export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView, children }) => {
-  const [enableMetadataManagement, setEnableMetadataManagement] = useState(false);
+export const MetadataProvider = ({ repoID, currentRepoInfo, hideMetadataView, selectMetadataView, children }) => {
+  const enableMetadataManagement = useMemo(() => {
+    if (currentRepoInfo.encrypted) return false;
+    return window.app.pageOptions.enableMetadataManagement;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [window.app.pageOptions.enableMetadataManagement, currentRepoInfo]);
+
   const [enableMetadata, setEnableExtendedProperties] = useState(false);
   const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
   const [showFirstView, setShowFirstView] = useState(false);
@@ -20,16 +24,6 @@ export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView,
   const [, setCount] = useState(0);
   const viewsMap = useRef({});
 
-  useEffect(() => {
-    seafileAPI.getRepoInfo(repoID).then(res => {
-      if (res.data.encrypted) {
-        setEnableMetadataManagement(false);
-      } else {
-        setEnableMetadataManagement(window.app.pageOptions.enableMetadataManagement);
-      }
-    });
-  }, [repoID]);
-
   const cancelURLView = useCallback(() => {
     // If attribute extension is turned off, unmark the URL
     const { origin, pathname, search } = window.location;
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 8dd176a407..f46c499668 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -2254,6 +2254,7 @@ class LibContentView extends React.Component {
     return (
       <MetadataProvider
         repoID={this.props.repoID}
+        currentRepoInfo={currentRepoInfo}
         selectMetadataView={this.onTreeNodeClick}
         hideMetadataView={this.hideFileMetadata}
       >