🪢 resso

World's Simplest React State Manager

(Support React 18, React Native, SSR, Mini Apps)

Reactive shared store of React. No extra re-render

English · 简体中文

Introduction

resso, world’s simplest React state manager →

Features

Extremely simple 🪩
Extremely smart 🫙
Extremely small 🫧

Install

yarn add resso

# npm i resso

Usage

import resso from 'resso';

const store = resso({ count: 0, text: 'hello' });

function App() {
  const { count } = store; // destructure at top first 🥷
  return (
    <>
      {count}
      <button onClick={() => store.count++}>+</button>
    </>
  );
}

Demo

API

import resso from 'resso';

const store = resso({ count: 0, inc: () => store.count++ });

// 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
function App() {
  const { count, inc } = store;
}

// For `react<=17`, you can use `resso.config()` to pass
// `ReactDOM.unstable_batchedUpdates` for batch updating in async updates.
//
// resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry

Re-render

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

License

MIT License (c) nanxiaobei

FUTAKE

Try FUTAKE in WeChat. A mini app for your inspiration moments. 🌈

singod / resso