get-set-react

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:

Installation

You can install get-set-react via npm:

npm install get-set-react

Usage

useGet: example without actions

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

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

export const Counter = () => {
  const { count } = useGet(store); // get state
  return <button onClick={incr}>{count}</button>;
};

useGet: example with actions

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,
  },
  ({ get, set, update }) => ({
    incr() {
      update((s) => s.count++); // {count:1}.
      // set(s=>({count:s.count+1})) ;
      // set({count:get().count+1}
    },
  })
);
export const Counter = () => {
  const { count, incr } = useGet(store);
  // you can also use useStore to access the
  return <button onClick={incr}>{count}</button>;
};

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: an alternative to useGet

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}
// stoer.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>;
};

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