World's Simplest React State Manager
Reactive shared store of React. No extra re-render, 0.45kb
English · 简体ä¸æ–‡
yarn add resso
# npm i ressoimport resso from 'resso';
const store = resso({ count: 0, text: 'hello' });
function App() {
const { count } = store; // destructure first, then use
return (
<>
{count}
<button onClick={() => store.count++}>+</button>
</>
);
}
import resso from 'resso';
const store = resso({ count: 0, inc: () => store.count++ });
const { count, inc } = store; // top level in a componentStore data are injected by useState, so please ensure to destructure first, at the top level of a component (Hooks rules), then use, or you may get React warning.
const store = resso({
count: 0,
text: 'hello',
inc: () => store.count++,
});
// No text update, no re-render
function Text() {
const { text } = store;
return <p>{text}</p>;
}
// Only count update, re-render
function Count() {
const { count } = store;
return <p>{count}</p>;
}
// No data in view, no re-render
function Control() {
const { inc } = store;
return (
<>
<button onClick={inc}>+</button>
<button onClick={() => store.count--}>-</button>
</>
);
}Try FUTAKE in WeChat. A mini app for your inspiration moments. 🌈
