state atom

atom.ts

import { useEffect, useState } from "react"

export type Atom<T> = {
  set(newValue: T): void
  get(): T
  listen(listener: (value: T) => void): () => void
}

export function createAtom<T>(initialValue: T): Atom<T> {
  let currentValue = initialValue
  const listeners = new Set<(value: T) => void>()
  return {
    set(newValue: T) {
      currentValue = newValue
      listeners.forEach((l) => l(newValue))
    },
    get() {
      return currentValue
    },
    listen(listener: (value: T) => void) {
      listeners.add(listener)
      return () => {
        listeners.delete(listener)
      }
    },
  }
}

export function useAtom<T>(atom: Atom<T>) {
  const [value, setValue] = useState(atom.get())
  useEffect(() => atom.listen(setValue), [atom])
  return value
}