import 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> </> ); }