src/hooks/index.ts

@@ -9,3 +9,4 @@ export * from './useNDKContext'
 export * from './useScrollDisable'
 export * from './useLocalStorage'
 export * from './useSessionStorage'
+export * from './useLocalCache'

src/hooks/useLocalCache.tsx

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from 'react'
+import { setLocalStorageItem, removeLocalStorageItem } from 'utils'
+
+export function useLocalCache<T>(
+  key: string
+): [
+  T | undefined,
+  React.Dispatch<React.SetStateAction<T | undefined>>,
+  () => void
+] {
+  const [cache, setCache] = useState<T | undefined>(() => {
+    const storedValue = window.localStorage.getItem(key)
+    if (storedValue === null) return undefined
+
+    // Parse the value
+    const parsedStoredValue = JSON.parse(storedValue)
+    return parsedStoredValue
+  })
+
+  useEffect(() => {
+    try {
+      if (cache) {
+        setLocalStorageItem(key, JSON.stringify(cache))
+      } else {
+        removeLocalStorageItem(key)
+      }
+    } catch (e) {
+      console.warn(e)
+    }
+  }, [cache, key])
+
+  const clearCache = useCallback(() => {
+    setCache(undefined)
+  }, [])
+
+  return [cache, setCache, clearCache]
+}