Link in bio to widgets, your online home screen. ➫ 🔗 kee.so
The simplest React state manager. Auto on-demand re-render ⚡️
Reactive Elegant Shared Store Object
(Support React 18, React Native, SSR, Mini Apps)
English · 简体中文
resso, world’s simplest React state manager →
- Extremely simple 🪩
- Extremely smart 🫙
- Extremely small 🫧
pnpm add resso
# or
yarn add resso
# or
bun add resso
# or
npm i ressoimport resso from 'resso';
const store = resso({
count: 0,
text: 'hello',
inc() {
const { count } = store; // must destructure at top (if use in method)
store.count = count + 1;
},
});
function App() {
const { count } = store; // must destructure at top (if use in UI)
return (
<>
{count}
<button onClick={() => (store.count += 1)}>+</button>
</>
);
}* destructure at top is calling useState (Hooks rules, or may get React error)
Single update
store.count = 60;
store('count', (c) => c + 1);Multiple update
store({
count: 60,
text: 'world',
});
store((s) => ({
count: s.count + 1,
text: s.text === 'hello' ? 'world' : 'hello',
}));Non-state shared vars (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 />;
}* react<18 batch update
resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry// no text update, no re-render
function Text() {
const { text } = store;
return <p>{text}</p>;
}
// only when count updates, re-render
function Count() {
const { count } = store;
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>
</>
);
}