SimpleR State
SimpleR State is an ultra-lightweight library that provides the simplest state management for React.
- Minimalist API; no complicated concepts or boilerplate
- Use plain functions to update state (including async)
- Largely unopinionated with flexible syntax
- Extremely simple to unit test state logic
- Highly extensible with plug-ins (e.g. persistence, dev tools)
- Full TypeScript support with uncomplicated types
- Made specifically for React, and built on React Hooks
- Multiple times faster than context/reducer solution
- It's tiny, just around 1 KB (minified + gzipped)
Get all these benefits with one dependency install:
npm install simpler-state
Two Easy Steps!
Step 1: Create an entity (shared state) and actions (updater functions)
// counter.js
import { entity } from 'simpler-state'
export const counter = entity(0)
export const increment = by => {
counter.set(counter.get() + by)
// alternatively: counter.set(val => val + by)
}
export const decrement = by => {
counter.set(counter.get() - by)
// alternatively: counter.set(val => val - by)
}
Step 2: Use the entity in your components with hooks
import { useEntity } from 'simpler-state'
import { counter, increment, decrement } from 'counter'
const CounterView = () => {
const count = useEntity(counter)
// alternatively: const count = counter.use()
return (
<>
<div>{count}</div>
<button onClick={() => increment(1)}> + </button>
<button onClick={() => decrement(1)}> - </button>
</>
)
}
It's that simple! But the library can do a lot more.