usePersistedState

storages.ts

export interface Storage {
  getItem: (key: string) => string | null
  setItem: (key: string, value: string) => void
  removeItem: (key: string) => void
}

const fallback: Storage = {
  getItem: (key: string): string | null => {
    console.log(`This is fallback key "${key}" cannot be readed`)

    return null
  },
  setItem: (key: string, value: string): void => {
    console.log(`This is fallback key "${key}" with value "${value}" cannot be writen`)
  },
  removeItem: (key: string): void => {
    console.log(`This is fallback key "${key}" cannot be removed`)
  },
}

export const localStorage = typeof window !== 'undefined' ? window.localStorage : fallback

usePersistedState.ts

import { useState, useEffect } from 'react'
import { localStorage, Storage } from './storages'

type usePersistedState<T> = [T, (value: T) => void]

export default function createPersistedState(
  storageKey: string,
  storage: Storage = localStorage
): [<T>(key: string, initialValue: T) => usePersistedState<T>, () => void] {
  const safeStorageKey = `persist:state:${storageKey}`
  const clear = (): void => {
    storage.removeItem(safeStorageKey)
  }

  const usePersistedState = <T>(key: string, initialValue: T): usePersistedState<T> => {
    const [state, setState] = useState<T>(initialValue)

    const setPersistedState = (value: T): void => {
      setState(value)

      const persist = storage.getItem(safeStorageKey)

      storage.setItem(
        safeStorageKey,
        JSON.stringify(
          Object.assign(persist ? JSON.parse(persist) : {}, {
            [key]: value,
          })
        )
      )
    }

    useEffect((): void => {
      const persist = storage.getItem(safeStorageKey)

      if (persist) {
        try {
          const item = JSON.parse(persist)[key]

          if (item) setState(item)
        } catch (ignore) {} // eslint-disable-line no-empty
      }
    }, []) // eslint-disable-line react-hooks/exhaustive-deps

    return [state, setPersistedState]
  }

  return [usePersistedState, clear]
}