useCachedState

useCachedState.ts

import useSWR, { Key, useSWRConfig } from 'swr'
import { useEffect } from 'react'

export const useCachedState = <T>(key: Key, fallbackData?: T) => {
  /// cache is used for subsequent uses
  const { cache } = useSWRConfig()
  /// if initial data is empty, use value from cache
  const initialData = fallbackData ?? cache.get(key)

  const { data, mutate } = useSWR(key, {
    fallbackData: initialData,
  })
  /// we mutate once to fill the fallbackData into cache
  useEffect(() => {
    void mutate(initialData, false)
  }, [])

  const setState = (newState: T) => {
    void mutate(newState)
  }
  return [data, setState] as const
}