useLocalStorage - an example of a hook the retrieves and stores data in local storage asynchronously

localstorage.ts

import { useEffect, useState } from "react"

export function useLocalStorage(key: string) {
  const [value, setValue] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(function getInitialValue() {
    setValue(localStorage.getItem(key))
    setIsLoading(false)
  }, [])

  useEffect(function updateLocalStorage() {
    if (value !== null)
      localStorage.setItem(key, value)
  }, [value])

  return [value, setValue, isLoading] as const
}