World's Simplest React State Manager
(Now Support React 18)
Reactive shared store of React. No extra re-render
English · 简体ä¸æ–‡
resso, world’s simplest React state manager →
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++ });
function App() {
// store data are injected by useState, so please ensure to destructure first,
// top level in a component (Hooks rules), then use, or may get React warning
const { count, inc } = store;
}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. 🌈
