resso

Create now ➫ 🔗 kee.so

🪢 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 resso

Usage

import 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)

API

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',
}));

None-state variables (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';

* react<18 batch update

resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry

Re-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 state in UI, no re-render
function Control() {
  return (
    <>
      <button onClick={store.inc}>+</button>
      <button onClick={() => (store.count -= 1)}>-</button>
    </>
  );
}

License

MIT License (c) nanxiaobei