perf: improve read status hook performance

lib/hooks/useReadStatus.js

@@ -1,21 +1,46 @@
-// A react hooks that use localstorage to store the read status of a post
-import { useEffect, useState } from 'react'
+import { debounce } from 'lodash'
+import { useEffect, useRef, useState } from 'react'
 
 const READ_STATUS_KEY = 'read-status'
 
-export const useReadStatus = (slug) => {
-  const [readStatus, setReadStatus] = useState(false)
+const useLocalStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key)
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      console.log(error)
+      return initialValue
+    }
+  })
 
-  useEffect(() => {
-    const readStatuses = JSON.parse(localStorage.getItem(READ_STATUS_KEY)) || {}
-    setReadStatus(readStatuses[slug] || false)
-  }, [slug])
+  const setLocalStorageValue = useRef(
+    debounce((value) => {
+      try {
+        window.localStorage.setItem(key, JSON.stringify(value))
+      } catch (error) {
+        console.log(error)
+      }
+    }, 300)
+  )
 
   useEffect(() => {
-    const readStatuses = JSON.parse(localStorage.getItem(READ_STATUS_KEY)) || {}
-    readStatuses[slug] = readStatus
-    localStorage.setItem(READ_STATUS_KEY, JSON.stringify(readStatuses))
-  }, [readStatus, slug])
+    setLocalStorageValue.current(storedValue)
+  }, [storedValue, setLocalStorageValue])
+
+  return [storedValue, setStoredValue]
+}
+
+export const useReadStatus = (slug) => {
+  const [readStatuses, setReadStatuses] = useLocalStorage(READ_STATUS_KEY, {})
+  const readStatus = readStatuses[slug] || false
+
+  const setReadStatus = (value) => {
+    setReadStatuses({
+      ...readStatuses,
+      [slug]: value,
+    })
+  }
 
   return [readStatus, setReadStatus]
 }