reactive-box

Minimalistic, fast, and highly efficient reactivity.

API of library implemented by only thee 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 on the next call 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.

Example 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>(Component: T) =>
  React.memo((props) => {
    const forceUpdate = useForceUpdate();
    const ref = React.useRef<[T, () => void]>();
    React.useEffect(() => ref.current![1], []);
    if (!ref.current) {
      ref.current = expr(Component, forceUpdate);
    }
    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 />
  </>
);

Install

npm i reactive-box

Enjoy!