Easy state management for react. change the state like you would change any javascript object.

get-set-react is a very simple, fast and light weight state management library for react. it supports both the single and multi store architectures. This is an alternative to redux, zustand, mobx.etc. It's upto 5 times fater than immer which is used in redux toolkit. It has a great dev tools support to debug and track your state changes to improve developer experience. it's built on top of get-set-immutable

Check out the examples here on stackblitz

check benchmarks here

Usage

useGet: example with setters

import { create, useGet } from "get-set-react";
const store = create({
  // data
  count: 0,
  address: {
    street: "123 Main St",
    city: "New York",
    state: "NY",
    zip: "10001",
  },

  // setters
  incr() {
    this.count++;
  },
  setStreet(street) {
    this.address.street = street;
  },

  //getters - starts with _
  _multiplyCount(multiplyBy = 2){
    return this.count * multiplyBy;
  }
});


export const Counter = () => {
  const { count, incr, setStreet, address, _multiplyCount} = useGet(store); // get state
  return (
    <div>
      <button onClick={incr}>{count}</button> <br />
      Doubled Count: {_multiplyCount(4)} <br />
      <input
        type="text"
        value={address.street}
        onChange={(e) => setStreet(e.target.value)}
      />
    </div>
  );
};

useGet: example with setters outside of the store

pass a function that returns an object of methods to set or get state called actions. they have access to val function which is used to get or set state.

useGet returns an object that contains both data and actions. actions can talk to each other through 'this'

import { create, useGet } from "get-set-react";
const store = create(
  {
    count: 0,
  }
);

const incr = () => {
  store.update((s) => s.count++);
  // or 
  store.set((s) => ({count:s.count+1}));
  // or 
  store.set({count:store.get().count+1});
};

export const Counter = () => {
  const { count } = useGet(store);
  // you can also use useStore to access the
  return <button onClick={incr}>{count}</button>;
};

set vs update

set is used to set the state to a new value. update is used to update the state by mutating it.

update function lets you change the state directly without having to return the new state like you would change any js object.

set function forces you to return new state by destructuring old state with new changes.

react - to state changes

react function similar to useEffect where you can listen to state changes by passing the dependencies. and execute a function if any of the dependencies change. you can directly change the state as you would change any js object.

import { create, react } from "get-set-react";
const store = create({
  count: 0,
  doubleCount: 0,
});
react((state) => {
  state.doubleCount = state.count * 2;
  // gets called only when count changes
}, (state) => [state.count]);

useSelector: an alternative to useGet to select portion of the state.

component will only re-render if that selected portion of the state changes.

import { create, useGet } from "get-set-react";

// create store
const store = create({
  count: 0,
});

// create a setter

const incr = () => {
  store.update((store) => {
    store.count++;
  });
};

export const Counter = () => {
  // consume store in any component you want using useGet or useVal or useSelector.
  const count = useSelector(store, (s) => s.count);
  return <button onClick={incr}>{count}</button>;
};

useVal: combination of get, set and update in one function

useVal accepts the store instance and returns a function when called with no argument returns state and when called with a value it replaces the state with that value. and when called with a function as an argument it works similar to update function. it can do what these functions 'get', 'set' and 'update' can do.

import { create, useVal } from "get-set-react";
// create store
const store = create({
  count: 0,
});
store.val(); // {count:0}
store.val({count:1}); // replaces state -> {count:1}
store.val(s=>s.count++); // updates state -> {count:2}

export const Counter = () => {
  // consume store in any component you want using useGet or useVal or useSelector.
  const val = useVal(store);
  return <button onClick={() => val((s) => s.count++)}>{val().count}</button>;
};

versioning

get-set-react supports versioning. you can pass a name to version when you set the state or you can manually call store.saveVersion(name) to save the current state as a version. you can retrieve saved version by calling store.getSavedVersion(name); and you can use set to reset state to the saved version.

import { create } from "get-set-react";

const store = create({
  count: 0,
});
// pass a second parameter to either set or update to set a version
store.set({count:1}, 'v1');
or 
store.set({count:2});
store.saveVersion('v2');
store.set({count:3});
// reset state to the saved version
store.set(store.getSavedVersion('v2'));

using with react-store-explorer

react-store-explorer is a dev tool to explore your state and actions. it's embedded in your app so it helps in tracking state changes and actions inside your application.

you can check this example here

import { create } from "get-set-react";
import { StoreExplorer } from "react-store-explorer";
const store = create({
  count: 0,
});
// in the component html add this. preferably in app.tsx
<StoreExplorer stores={{store}} />

reset State on unmount

there are two ways to reset your state automatically when the component that it subscribes unmounts.

1. useGet(store, true); second parameter here is a boolean if passed as true, it'll reset state when the component is unmounted. it's recommended to use it at parent level or wherever you need. But not in every component where you use that store.

2. you can also use a seperate hook called useReset([...stores]); you can pass collection of stores that needs to be reset upon unmount.

why get-set-react? (ease of use and speed)

It makes state management easy for large and very complex react applications with complex state. It majorly focuses on developer experience and performance. Destructuring porition of the state to update state is difficult if it's a large object and tedious. get-set-react offers utilities to update state directly without compramising the immutability of the object. it will do all the work to keep the object immutable, you just need to change the state as you would change any javascript object. it supports the multi store architecture. meaning, changing a store / state will not have any impact on root store. Because each store is independent. it's faster than immer. it follows the guidelines of react very strictly and supports React 19. It also provides ability to reset the state when a specific component is unmounted through 'reset' function. It offers 'react' function to react to the state changes.