React Simple Atom Storage

atom.ts

// import { useEffect, useState } from 'react';
import { useEffect, useState } from 'preact/compat';

interface Atom<T> {
  key: Symbol
}
interface StoreValue {
  value: any,
  listeners: Set<() => void>
}

const store = new Map<Symbol,StoreValue>();

export const createAtom = <T>(initialValue: T) : Atom<T> => {
  const key = Symbol();
  store.set(key, {
    value: initialValue,
    listeners: new Set()
  });
  return { key };
}

export const useAtom = <T>(atom: Atom<T>) => {
  const entry = store.get(atom.key);
  if (!entry) throw new Error('Atom not found!');
  const [_, rerender] = useState<unknown>();
  const value = entry?.value;
  const setValue = (value: T) => {
    entry.value = value;
    entry.listeners.forEach(x => x());
  }
  useEffect(() => {
    const listener = () => rerender({});
    entry.listeners.add(listener);
    return () => {
      entry.listeners.delete(listener);
    }
  })
  return [value, setValue] as const;
}