Link in bio to widgets, your online home screen. ➫ 🔗 kee.so

---

🪢 resso

The simplest React state manager. Auto-handle on-demand re-render.

Reactive Elegant Shared Store Object

English · 简体中文

Note

Breaking change since v0.26.0 (to better fit AI & React Compiler):
In React components, always use const { count } = store.useStore() to get state.
Direct access store.count or const { count } = store is now for pure data reads.

Introduction

resso, world’s simplest React state manager →

Features

• Extremely simple
• Extremely smart
• Extremely small

Demo

Install

bun add resso
#
pnpm add resso
#
yarn add resso
#
npm i resso

Usage

import resso from 'resso';

const store = resso({
  count: 0,
  text: 'hello',
  inc() {
    store.count += 1;
  },
});

function App() {
  const { count, inc } = store.useStore();
  return (
    <>
      {count}
      <button onClick={inc}>+</button>
      <button onClick={() => (store.count -= 1)}>-</button>
    </>
  );
}

API

Get

// Get state, in component
const { count } = store.useStore();

// Read state, in method
function doSomething() {
  const total = store.count * 2;
  const filtered = store.list.filter((item) => item.name !== '');
  // ...
}

Set (triggers re-render)

// Single
store.count = 60;
store('count', (c) => c + 1);

// Multiple
store({
  count: 60,
  text: 'world',
});

store((s) => ({
  count: s.count + 1,
  text: s.text === 'hello' ? 'world' : 'hello',
}));

---

* react<18 batch update

resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry

Shared Refs

Actually, it's not related to resso, it's just JavaScript. You can do it like this:

// store.js
export const refs = {
  total: 0,
};

// App.js
import store, { refs } from './store';

function App() {
  refs.total = 100;
  return <div />;
}

Re-render on demand

// No `text` update, no re-render
function Text() {
  const { text } = store.useStore();
  return <p>{text}</p>;
}

// Only `count` update triggers re-render
function Count() {
  const { count } = store.useStore();
  return <p>{count}</p>;
}

// No state in UI, no re-render
function Control() {
  return (
    <>
      <button onClick={store.inc}>+</button>
      <button onClick={() => (store.count -= 1)}>-</button>
    </>
  );
}

License

MIT License (c) nanxiaobei