Simplified Code Pattern

subscriptionStore.jsx

Class Store {
  #state: { count: 0 };
  
  constractor(initialState) {
    if (initialState) this.#state = initialState
  }

  get state() {
    return this.#state
  }
  
  set state() {
    // requires immutatable update
    this.#state = fn(this.state);
    this.listeners.forEach(listener => listener())
  }
  
  listeners: new Set()
  
  subscribe: (cb) => {
    this.listners.add(cb)
    return () => this.listners.delete(callback);
  }
  
  getSnapshot: () => {
  // freeze is optional
    const snap = Object.freeze(this.state)
    return snap
  }
}

// use external store
const Component = () => {
  const store = new Store() 
  const snap = useSyncExternalStore(store.subscribe, store.getSnapshot)
  return <div>{snap.count}</div>
}