๐ชข resso
The Simplest React State Manager
Auto on-demand re-render
Reactive Elegant Shared Store Object
(Support React 18, React Native, SSR, Mini Apps)
English ยท ็ฎไฝไธญๆ
Introduction
resso, worldโs simplest React state manager โ
Features
- Extremely simple ๐ชฉ
- Extremely smart ๐ซ
- Extremely small ๐ซง
Install
pnpm add resso
# or
yarn add resso
# or
npm i ressoUsage
import resso from 'resso';
const store = resso({ count: 0, text: 'hello' });
function App() {
const { count } = store; // data in UI must destructure at top first ๐ฅท
return (
<>
{count}
<button onClick={() => ++store.count}>+</button>
</>
);
}
API
Initialize
import resso from 'resso';
const store = resso({
count: 0,
inc: () => {
const { count } = store; // data in methods must destructure at top, also ๐ฅท
},
});Update
// single update โ directly assign
store.count = count + 1;
// single update โ updater funtion
store('count', (prev) => prev + 1);
// multiple updates
Object.assign(store, { a, b, c });Use
// data in UI must destructure at top first, since they were injected by useState
function App() {
const { count } = store; // must at top, or may get React warning (Hooks rules)
}* react<18 batch update
// to use batch update when react<18:
resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entryRe-render on demand
// 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 data in UI, no re-render
function Control() {
return (
<>
<button onClick={store.inc}>+</button>
<button onClick={() => --store.count}>-</button>
</>
);
}License
FUTAKE
Try FUTAKE in WeChat. A mini app for your inspiration moments.
