Fun to use state management library for your awesome React app

Usage no npm install needed!

<script type="module">
  import easyReactState from 'https://cdn.skypack.dev/easy-react-state';



Managing your app state should be easy and fun. easy-react-state is a minimal library for creating state management for your React project.



npm install --save easy-react-state
yarn add easy-react-state


  • easy to adopt with. Just think of React.useState where it has multiple setters which update the state object.
  • reduce boilerplate codes. No need to create actions. Just call and pass the right data.
  • intuitive selector system.
  • minimal API. Don't need to use some helper functions to support async updates.
  • typescript supports.


1 - Configuring your store

const configAppStore = {
  todos: {
    initialState: [],
    setters: state => ({
      addTodo(todo) {
        return state

2 - Creating state manager based on your store

const [useAppSelector, appSetters] = createStateManager(configAppStore)

3 - Consume to your React Component

We don't need a Provider to consume the store. Just create a manager, then you can use it directly.

const App = () => {
  const todos = useAppSelector(state => state.todos)
  console.log('todos', todos)
  return (
      <h3>Todos Control</h3>
        onClick={() => {
          const todo = {
            id: `todo-${Date.now()}`,
            label: `Todo ${Date.now()}`,
        Add todo

Use setters inside async

Our setters are object which holds all the state setters. Upon creating, we can call setters just like normal functions. Indeed, we can call it everywhere. No need wrapper function like thunk to make it possible. Just call it immediately!

const [useAppSelector, appSetters] = createStateManager(configAppStore)

async function fetchUsers() {
  try {
    const res = await apiUsers()
  } catch (err) {

Invoking setters outside React

React will batch the updates for subsequent calls of setters. But if you call these setters outside the React event system, like Promise or setTimeout, then every call will cause a re-render to Component. To avoid this, you can wrap your setters inside the ReactDOM.unstable_batchedUpdates.

import { unstable_batchedUpdates as batch } from 'react-dom'

// No batching
const Test1 = () => {
  React.useEffect(() => {
    // This will cause 2 renders
    setTimeout(() => {
  }, [])
  return <div>Test 1</div>

// With batching
const Test2 = () => {
  React.useEffect(() => {
    setTimeout(() => {
      // Single render
      batch(() => {
  }, [])
  return <div>Test 2</div>


Type Interfaces

interface CreateState<S = any> {
  initialState: S
  setters: (state: S) => any

interface ConfigStore {
  [x: string]: CreateState

interface Options {
  label?: string
  logging?: boolean

interface Store<S, U> {
  getState: () => S
  subscribe: (Listener: Listener) => () => void
  setters: U

interface Selector<S> {
    selector: (state: S) => T,
    equalityFn?: (prevSelectedState: T, nextSelectedState: T) => boolean,
  ): T

interface Setter {
  (...args: any[]): any


createStateManager(configStore: ConfigStore, options?: Options): [useSelector, setters, store]

This function creates a resources which we can use to manage the state based on the configStore. It also return a store object.


store: Store<State, Setters>

An object which we can use to get the current state, subscribe and update state through setters. Its interface is just like redux-store.


useSelector: Selector

A function which we can use to extract data from the store state using a selector function. useSelector semantics are pretty the same with useSelector of react-redux. The difference is useSelector of react-redux uses strict === reference equality. Unlike useSelector of easy-react-state, it uses Object.is for comparing selectedState. Check react-redux for more info. useSelector supports the selector created by reselect.


setter(...args: any[]): S

An object which holds functions which we can use to update the state. easy-react-state uses the amazing immerjs. When updating a state, you can use mutator syntax like state.name = 'zion' for ease. Every setter must return the mutated state or new value. Internally, the state gets mutated inside the setter is a draftState created by immer. Then immer will create a new object based on the value, either draftState or new value, returned by setter leaving the originalState untouchable. Note the setters which are returned by createStateManger are now wrappedSetters. If the passed setters are returning state. Then this wrappedSetters are now returning void.


  • doesnt have DevTools for now. But it has logging option.
  • it doesnt support nested state. All state are resided at the top level object.


MIT © ombori