@efficimo/observable-react

React bindings for @efficimo/observable: subscribe components to observable state with no context and no provider.

Installation

npm install @efficimo/observable @efficimo/observable-react

Both @efficimo/observable and react (>=18) are peer dependencies.

useObservableValueState

Drop-in replacement for useState, backed by an ObservableValue.

import { ObservableValue } from '@efficimo/observable';
import { useObservableValueState } from '@efficimo/observable-react';

const count = new ObservableValue(0);

function Counter() {
  const [value, setValue] = useObservableValueState(count);

  return (
    <button onClick={() => setValue(prev => prev + 1)}>
      Count: {value}
    </button>
  );
}

Multiple components subscribing to the same ObservableValue stay in sync automatically. The observable lives outside React — no context, no provider, no boilerplate.

useObservableSync

Read-only counterpart: subscribes to an observable and returns its current value, without a setter. Built on useSyncExternalStore, so it is concurrent-safe and re-renders only when the value actually changes.

import { useObservableSync } from '@efficimo/observable-react';

function Display() {
  const value = useObservableSync(count);

  return <span>{value}</span>;
}

Use it when a component only reads the observable — useObservableValueState is useObservableSync plus a setState-style setter.

Core primitives

ObservableValue, DerivedObservableValue, ObjectObservableValue and JsonSerializeObservableValue are documented in the main README.

License

MIT