Boilerplate for a state management library with React.useSyncExternalStore

store.ts

import { useSyncExternalStore } from "react"

const cache = new Map()

function defaultActions() {
  return {}
}

type StateType<R, actionsType> = {
  key: string
  default: R
  actions?: ({
    dispatch,
  }: {
    dispatch: React.Dispatch<React.SetStateAction<R>>
  }) => actionsType
}

/**
 * Creates a stateful store
 */

export function create<T = any, actionsType = {}>(
  config: StateType<T, actionsType>
) {
  const { key, default: initialValue, actions } = config

  if (!cache.has(key)) cache.set(key, initialValue)

  const listeners = new Set<any>()

  function setValue(value: React.SetStateAction<T>) {
    const currentValue = cache.get(key)

    const newValue =
      typeof value === "function" ? (value as any)(currentValue) : value

    cache.set(key, newValue)
    listeners.forEach((listener) => {
      listener(newValue)
    })
  }

  const cachedActions = ((actions ||
    defaultActions) as unknown as typeof actions)!({
    dispatch: setValue,
  })

  return {
    /**
     * Use the current state of the store
     */
    use() {
      function subscribe(listener: (updatedValue: T) => void) {
        listeners.add(listener)

        return () => listeners.delete(listener)
      }
      function getSnapshot() {
        return cache.get(key)
      }

      return useSyncExternalStore<T>(subscribe, getSnapshot, getSnapshot)
    },
    /**
     * Set the store value
     */
    setValue,
    /**
     * Store actions
     */
    actions: cachedActions,
  } as const
}