A custom hook for putting anything that can be JSON encoded and decoded into local storage. IMPORTANT: Do not use more than one `useLocalStorage` hook for the same local storage key. This will cause the local storage to update, but not the states for BOTH hooks.

useLocalStorage.ts

import * as React from 'react'
import {useEffect} from 'react'

type Jsonable = null | boolean | number | string | Jsonable[] | { [prop: string]: Jsonable }

export const useLocalStorage = <T extends Jsonable>(
  key: string,
  initialValue: T | (() => T),
) => {
  const [value, setValue] = React.useState(() => {
    // First, check if there is already a value for the provided key.
    const storedValue = localStorage.getItem(key)
    if (typeof storedValue === 'string') {
      return JSON.parse(storedValue) as T
    }

    // If there isn't already a stored value, use the initialValue.
    let returnValue
    initialValue instanceof Function
      ? returnValue = initialValue()
      : returnValue = initialValue

    return returnValue
  })

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])

  return [value, setValue] as const
}