observable-hooks

observable-hooks provides React hooks designed specifically for working with RxJS Observables. It enables seamless integration between React's reactive primitives (props, state, context) and RxJS Observables using pure functions, avoiding common patterns like the tap hack.

Key features include:

• Concurrent Mode Safety: Designed to work safely with React's concurrent rendering.
• Suspense Support: Supports the Render-as-You-Fetch pattern using React Suspense.
• Full RxJS Power: Provides uncompromised access to the full RxJS API.
• Performance: Optimized for minimal impact on application performance.

Relationship with State Management

observable-hooks is not a replacement for global state management tools like Redux. Instead, it is intended to reduce the need to dump complex, transient, or highly interactive asynchronous logic into a global state store.

Best Practices

• Use selectively: Do not turn everything into an Observable. Only use this library where complex asynchronous coordination is required.
• Coexistence: It is designed to work side-by-side with standard React hooks and other state management solutions.

To bring values from the Observable World into the Normal World, use the following hooks:

Observable to State

Use these hooks to subscribe to an observable and store its latest emitted value in React state, triggering re-renders:

• useObservableState(input$, initialOutput)
• useObservableEagerState(input$, initialOutput)
• useLayoutObservableState(input$, initialOutput)

Observable to Callbacks

If you need to perform side effects (like logging or calling a function) whenever an observable emits, instead of managing state, use useSubscription. This is preferred over manual useEffect for managing RxJS subscriptions within React.

useSubscription(input$, onNext)

// Observable to State
const output = useObservableState(input$, initialOutput);

// Observable to Callbacks
useSubscription(input$, v => log(v));

Integration Model

observable-hooks provides a bridge between React and RxJS. It is designed to handle:

• React to RxJS: Converting props, state, and context into Observables.
• RxJS to React: Converting Observables into React state, props, or events.
• Conditional Rendering: Using streams of React Components for dynamic UI.
• Data Fetching: Implementing 'Render-as-You-Fetch' patterns using React Suspense.

When to use it

• Use it to encapsulate complex sync and async logic within reusable components.
• Use it when you want to leverage the power of RxJS (operators, marble testing, etc.) within a React lifecycle.
• Note: It is not a replacement for global state management (like Redux), but a tool to reduce the need for global state by managing local complex logic via Observables. It is intended to work side-by-side with standard React hooks.

The core design of observable-hooks is based on two conceptual partitions:

1. Observable World: The domain where RxJS observable pipelines reside. These pipelines can exist inside or outside of React components.
2. Normal World: Any part of your application that is not part of an observable pipeline (e.g., standard React component logic, state, props, and event handlers).

observable-hooks acts as the bridge between these two worlds, allowing you to move data from observables into React state, or from React events into observable streams.

The observable-hooks library provides a simple, flexible, testable, and performant way to reuse complex asynchronous logic (such as intricate animation sequences or user interaction flows) within React Components.

It is designed to bridge the gap between RxJS Observables and React Hooks. Instead of using hooks solely for simple state management, you can use observable-hooks to manage complex async logic that would otherwise be difficult to coordinate using standard React state and effects.

The ObservableResource class rewires an RxJS Observable into a Relay-like Suspense resource. It allows you to bridge the push-based nature of Observables with the pull-based nature of React Suspense, enabling a concurrent-mode safe way to handle asynchronous data fetching.

// Conceptual usage pattern
const resource = new ObservableResource(input$);
const value = useObservableSuspense(resource);

If you are passing standard, non-observable values through React Context, you can use the useObservable hook to transform that value into an observable stream. By passing the context value into the dependency array of useObservable, the stream will re-evaluate whenever the context value changes.

const normalValue = useContext(NormalValueContext)

const normalValueList$ = useObservable(
  inputs$ => inputs$.pipe(
    scan((acc, inputs) => [...acc, ...inputs], []),
    take(10)
  ),
  [normalValue]
)

You can use observable-hooks to implement the Render-as-You-Fetch pattern with React Suspense. This approach is concurrent-mode safe and leverages Observables as a data source.

Instead of moving resources into component state to handle race conditions, you can use RxJS operators like switchMap to manage data streams. This allows you to keep pushing new values (e.g., new request IDs) into the same resource rather than replacing the resource itself.

import { useObservableSuspense } from 'observable-hooks'
import { postsResource, fetchPosts } from './api'

// Trigger the fetch
fetchPosts('crimx')

function ProfileTimeline() {
  // useObservableSuspense handles the Suspense lifecycle
  const posts = useObservableSuspense(postsResource)
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  )
}