Reactive

A super simple, yet powerful and performant library for State Management / Reactive Programming.

Using React

import { useReactive } from "@reactivedata/react";

export default function App() {
  const state = useReactive({
    clickCount: 0,
  });

  return (
    <div>
      <p>
        The button has been clicked <strong>{state.clickCount} times!</strong>
      </p>
      <button onClick={() => state.clickCount++} />
    </div>
  );
}

^{View on CodeSandbox}

Pass in any object to useReactive to create a Reactive state. Any properties (even nested / deep properties) can be mutated, and your component will update automatically if it's using any of the changed data.

reactive knows that your component uses state.clickCount, and when you click the button, it detects the change to clickCount and figures out which components need to be re-rendered with the new value.

Advanced example

const state = useReactive({
  players: [{ name: "Peter" }],
});

Adding players (state.players.push) or modifying a name (state.players[0].name = "John") will trigger changes and work out-of-the-box.

Without React

Reactive is perfectly usable without React, and actually has 0 external dependencies.

Simple example

import { reactive, autorun } from "@reactivedata/reactive";

const data = reactive({
  players: [{ name: "Peter" }],
});

autorun(() => {
  console.log(`There are ${data.players.length} players, the first player name is ${data.players[0].name}`);
});

data.players.push({ name: "Paul" });
data.players[0].name = "John";

Will print:

There are 1 players, the first player name is Peter
There are 2 players, the first player name is Peter
There are 2 players, the first player name is John

^{View on CodeSandbox}

API

reactive
autorun
autorunAsync
untracked
runInAction

(to be documented)

^{The API surface is inspired by MobX, but with support for autorunAsync and an easier React interface.}

Credits ❤️

Reactive builds on Reactive Programming concepts. In particular, it's inspired by and builds upon the amazing work by MobX and NX Observe.