he5050 / resso

🪢 World's Simplest React State Manager

🪢 resso

World's Simplest React State Manager

Reactive shared store of React. No extra re-render, 0.45kb

English · 简体中文

---

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 first, then use
  return (
    <>
      {count}
      <button onClick={() => store.count++}>+</button>
    </>
  );
}

Demo

API

import resso from 'resso';

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

const { count, inc } = store; // top level in a component

Store 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.

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. 🌈