diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 7142991cb6..3d4323a096 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -3406,14 +3406,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx": {
-    "no-restricted-properties": {
-      "count": 3
-    },
-    "react/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/block-selector/tool-picker.tsx": {
     "no-restricted-imports": {
       "count": 1
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
index 6e6f75c214..2bf0b51dba 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/index.tsx
@@ -4,14 +4,14 @@ import type { ViewType } from '@/app/components/workflow/block-selector/view-typ
 import type { OnSelectBlock } from '@/app/components/workflow/types'
 import { RiMoreLine } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
 import Loading from '@/app/components/base/loading'
 import { getFormattedPlugin } from '@/app/components/plugins/marketplace/utils'
+import { useLocalStorage } from '@/hooks/use-local-storage'
 import Link from '@/next/link'
 import { useRAGRecommendedPlugins } from '@/service/use-tools'
-import { isServer } from '@/utils/client'
 import { getMarketplaceUrl } from '@/utils/var'
 import List from './list'
 
@@ -29,26 +29,7 @@ const RAGToolRecommendations = ({
   onTagsChange,
 }: RAGToolRecommendationsProps) => {
   const { t } = useTranslation()
-  const [isCollapsed, setIsCollapsed] = useState<boolean>(() => {
-    if (isServer)
-      return false
-    const stored = window.localStorage.getItem(STORAGE_KEY)
-    return stored === 'true'
-  })
-
-  useEffect(() => {
-    if (isServer)
-      return
-    const stored = window.localStorage.getItem(STORAGE_KEY)
-    if (stored !== null)
-      setIsCollapsed(stored === 'true')
-  }, [])
-
-  useEffect(() => {
-    if (isServer)
-      return
-    window.localStorage.setItem(STORAGE_KEY, String(isCollapsed))
-  }, [isCollapsed])
+  const [isCollapsed, setIsCollapsed] = useLocalStorage<boolean>(STORAGE_KEY, false)
 
   const {
     data: ragRecommendedPlugins,