README.md

This implementation makes use of useSyncExternalStore() that is available in React 18 or via shim.

Example

Store declaration:

// CounterStore.js
import { createStore } from 'thelib'

let [CounterProvider, useCounter] = createStore((set) => ({
  counter: 0,
  increment() {
    set(state => ({ counter: state.counter + 1 }));
  },
}))

export { CounterProvider, useCounter }

Store consumption:

// CounterView.jsx
import { CounterProvider, useCounter } from './CounterStore'

function View() {
  return (
    <CounterProvider>
      <Output />
      <Controls />
    </CounterProvider>
  )
}

function Output() {
  // only gets updated with selector has changed
  let value = useCounter(state => state.counter)
  return <span>{value}</span>
}

function Controls() {
  // never gets re-rendered
  let increment = useCounter(state => state.increment)
  return <button onClick={increment}>+</button>
}

createStore.js

import * as React from 'react'
import { createContext, useContext, useMemo } from 'react'
import { useSyncExternalStore } from 'use-sync-external-store/shim'

export function createStore(fn) {
  let Ctx = createContext()

  function Provider({ children }) {
    let source = useMemo(() => createSource(fn), [])
    return <Ctx.Provider value={source} children={children} />
  }

  let useSelector = (selector) => {
    let source = useContext(Ctx)
    let getSnapshot = () => selector(source.getState())
    return useSyncExternalStore(source.subscribe, getSnapshot)
  };
  
  return [Provider, useSelector];
}

function createSource(fn) {
  let events = new EventTarget()
  let state = fn(set)

  function set(fn) {
    state = Object.assign(state, fn(set))
    events.dispatchEvent(new CustomEvent('update'))
  }

  function subscribe(cb) {
    events.addEventListener('update', cb)
    return () => events.removeEventListener('update', cb)
  }

  return { getState() { return state }, subscribe }
}