reactive-box

Minimalistic, fast, and highly efficient reactivity.

Hi friends! Today I will tell you how I came to this.

Redux has so many different functions, Mobx has mutable objects by default, Angular so heavy, Vue so strange, and other them so young :sweat_smile:

These funny thoughts served as fuel for writing the reaction core. So that everyone can make their own syntax for managing the state of the application in 100-150 lines.

It only three functions:

• box - is the container for an immutable value.
• sel - is the cached selector (or computed value in another terminology) who will mark for recalculating If some of read inside boxes or selectors changed.
• expr - is the expression who detects all boxes and selectors read inside and reacted If some of them changed.

Counter with Node.js on RunKit

That counter with React:

import React from "react";
import { box, sel, expr } from "reactive-box";

const [getCounter, setCounter] = box(0);
const [getNext] = sel(() => getCounter() + 1);

const increment = () => setCounter(getCounter() + 1);
const decrement = () => setCounter(getCounter() - 1);

const useForceUpdate = () => {
  return React.useReducer(() => [], [])[1];
};

const observe = <T extends React.FC<P>, P>(Component: T) =>
  React.memo((props: P) => {
    const forceUpdate = useForceUpdate();
    const ref = React.useRef<[T, () => void]>();
    if (!ref.current) {
      ref.current = expr(Component, forceUpdate);
    }
    React.useEffect(() => ref.current![1], []);
    return ref.current[0](props);
  });

const Counter = observe(() => (
  <p>
    Counter: {getCounter()} (next value: {getNext()})
  </p>
));

const Buttons = () => (
  <p>
    <button onClick={decrement}>Prev</button>
    <button onClick={increment}>Next</button>
  </p>
);

export const App = () => (
  <>
    <Counter />
    <Buttons />
  </>
);

It is minimal core for a big family of state managers' syntax. You can use the different syntax of your data flow on one big project, but the single core of your reactions provides the possibility for easy synchronization between them.

Examples of state managers' syntax:

• Simple store and actions and only hooks with React on CodeSandbox
• Simple model with React on CodeSandbox
• Mobx like todo-mvc with React on CodeSandbox

Install

npm i reactive-box

Enjoy!