A react useState with localStorage persistence

use-storage.js

import { useEffect, useState } from 'react'

export const useStorage = (key, defaultValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = typeof window !== 'undefined' && window?.localStorage.getItem(key)
    return (storedValue && JSON.parse(storedValue)[key]) || defaultValue
  })

  useEffect(() => {
    const valueToStore = { [key]: value }
    console.log(valueToStore)
    typeof window !== 'undefined' && window?.localStorage?.setItem(key, JSON.stringify(valueToStore))
  }, [value, window])

  return [value, setValue]
}