Singleton State

A 1kB alternative to React Context with improved performance and ergonomics.

npm install singleton-state-hook

Interactive demo: https://singletonstate.web.app/

Define your state

Every piece of state is a separate export. Create state using singletonState.

import { singletonState } from 'singleton-state-hook'

export const Count = singletonState(0)

Use your state

Just import and use the state in your components, no providers needed.

import { Count } from './store.ts'

function Display() {
  const count = Count.useState()
  return <h1>{count}</h1>
}

function Increment() {
  const handleClick = () => Count.set(count => count + 1)
  return <button onClick={handleClick}>Increment</button>
}

Computed state

If you want a piece of state to depend on another pieces of state, you can define one using computed. This computed state will only update if the dependency updates.

export const DoubleCount = computed(Count, count => count * 2)

Direct access to the state value

Need to use the value of your state in a place where state cannot be easily accesed? Use .ref() to get the current value directly.

import { Count } from './store.ts'

useEffect(() => {
  window.addEventListener('pointermove', e => {
    console.log(Count.ref())
  })
}, [])

Performance benefits?

React Context causes all consumers of the context to re-render every time the value changes. Commonly there will be multiple values in the same context like so:

export const Context = createContext<{
  count: number
  setCount: Dispatch<SetStateAction<number>>
  someOtherState: string
}>(null!)

This will mean that any subscribers of someOtherState will get a re-render every time count changes, unless we wrap our app with a new provider for every piece of state.

With Singleton State, each piece of state will be separated into its own hook, so there will be no unnecessary re-renders.