react-rx

react-rx is a small TypeScript library from Sanity.io that bridges React and RxJS. It offers two complementary ways to consume Observables in a React app: a useObservable hook (plus useObservableEvent) for subscribing to Observables inside function components, and a set of utilities for building “reactive components” that re-render in response to Observable emissions without extra boilerplate.

It is built on a small React Hook core, works correctly with Observables that emit synchronously (so components don’t pay a re-render-on-mount tax), and ships full TypeScript types alongside support for React 18 and 19 concurrent features.

What You Get

• useObservable hook for subscribing to an RxJS Observable and reading its latest emitted value inside a function component
• useObservableEvent hook for turning a stream of one-off events (e.g. a Subject) into a stable callback usable in event handlers
• Reactive-component utilities for building components that re-render directly off an Observable’s emissions, as an alternative programming style to the hooks
• Correct handling of Observables that emit synchronously on subscribe, avoiding the extra render-on-mount that naive useEffect + useState wiring produces
• Full TypeScript typings and support for React 18/19, including concurrent-mode-safe subscription lifecycles

Common Use Cases

• Exposing a shared RxJS-based store or service (e.g. Sanity Studio’s internal state streams) directly to React components without a separate state-management layer
• Rendering real-time data (websocket feeds, live queries, presence indicators) where the source is naturally modeled as an Observable
• Converting imperative event streams (clicks, keypresses, custom Subjects) into stable React event-handler callbacks via useObservableEvent
• Building highly reactive UI components that need to update synchronously in lockstep with an underlying Observable, avoiding intermediate stale renders

Under The Hood

Architecture The published package is a single small module (packages/react-rx/src/index.ts) re-exporting two focused units: useObservable.ts, which implements the subscription lifecycle hook (handling subscribe/unsubscribe, synchronous first emissions, and React’s concurrent rendering model), and useObservableEvent.ts, which adapts an event-shaped Observable into a stable callback reference; the reactive-component utilities described in the README are layered on top of useObservable as an alternative API surface, so the whole library is deliberately a thin, dependency-light seam over RxJS rather than a state-management framework in its own right.

Tech Stack It’s TypeScript targeting react (peer dependency, React 18/19) and rxjs (peer dependency) as its only real integration points, published as dual ESM/CJS (./dist/index.js and ./dist/index.cjs) from a pnpm workspace monorepo that also contains a documentation website, using Changesets for versioned releases published to npm via OIDC trusted publishing.

Code Quality The core package has a compact, single-purpose test suite under src/__tests__ covering error propagation, React StrictMode double-invocation behavior, and useObservable semantics (errors.test.tsx, strictmode.test.tsx, useObservable.test.tsx, plus a .test-d.ts type-level test), run with Vitest; the small surface area (two hooks, ~135 lines for useObservable.ts) keeps the implementation easy to audit, and sideEffects: false plus explicit source/require/default export conditions show attention to bundler and tree-shaking correctness.

API Design The public API is intentionally minimal — useObservable(observable, initialValue) and useObservableEvent(handler) cover the hook-based style, with reactive-component helpers as a separate, non-mixed style for teams that prefer components driven directly by Observables — keeping the day-one learning curve very low for anyone already comfortable with RxJS and React hooks.