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)
import { entity } from 'simpler-state'
export const counter = entity(0)
export const reset = () => {
counter.set(0)
}
export const increment = by => {
counter.set(value => value + by)
}
Step 2: Use the entity in your components with hooks
import { counter, increment, reset } from 'counter'
const CounterView = () => {
const count = counter.use()
return (
<>
<div>{count}</div>
<button onClick={() => increment(1)}> + </button>
<button onClick={reset}> Reset </button>
</>
)
}
It's that simple! But the library can do a lot more, so check out the docs website.
Documentation
Learn more about what you can do with SimpleR State at simpler-state.js.org.
Feedback
If you like this library, the concept, and its simplicity, please give it a star ⭐️ on the GitHub repo to let me know. 😀
The RFC (Request For Comments) has ended, but please feel free to open an issue on GitHub for any concerns/questions/suggestions.
Prior Art
This library is an evolution of the already production-proven react-entities that I also wrote. It shares the same stable core, but with a very different API.