TL;DR: React-RxJS combines the declarative power of React with the reactive programming capabilities of RxJS, making it ideal for handling complex state updates, asynchronous tasks, and real-time events in your apps.

As we know, React is one of the most popular JavaScript libraries for building user interfaces. Developers use its declarative approach to describe how a UI should look according to the application’s current state, and React efficiently updates the UI whenever the state changes.

The RxJS (reactive extensions for JavaScript) library lets developers work with asynchronous data streams and events in a declarative and composable way. It uses observables, which are sequences of values that unfold over time, to represent various data sources like user clicks and API requests.

The combination of React’s declarative UI approach and RxJS’s reactive programming capabilities creates a powerful synergy for building modern web apps. React-RxJS becomes particularly valuable when handling complex state management, asynchronous data streams, and real-time events.

Understanding React-RxJS

React-RxJS is a library that seamlessly integrates the power of RxJS into React apps. It provides a set of tools and utilities that allow developers to manage state and side effects reactively. At the heart of React-RxJS is the concept of using streams as state. RxJS streams, with their declarative nature, are used to represent and manage the state of a React app. They only execute effects when subscribed to, meaning state changes are handled efficiently.

Let’s explore the advantages of using React-RxJS:

Improved scalability for complex states: React-RxJS excels in managing complex state scenarios. By leveraging RxJS operators, developers can handle intricate state transformations and updates efficiently, ensuring the app remains scalable as complexity grows.
Better handling of async data streams: React-RxJS simplifies the handling of asynchronous data streams, a common requirement in modern apps. With RxJS, developers can manage API requests, user interactions, and other async events in a streamlined and declarative way, improving code readability and maintainability.
Reducing prop drilling and improving component isolation: React-RxJS can help minimize prop drilling, a common issue in React apps where data is passed down through multiple layers of components. By using observables to manage state, components can directly subscribe to the data they need, reducing unnecessary props and improving component isolation.

Setting up React-RxJS

To use React-RxJS effectively, a basic understanding of both React and RxJS is essential. Familiarity with React concepts like components, state, and hooks is important, along with a grasp of RxJS fundamentals such as observables, observers, and operators.

To install React-RxJS in your React project, use the following npm command.

npm install @react-rxjs/core rxjs

This command installs the core React-RxJS library, providing the essential tools for integration, and RxJS, the reactive programming library itself.

Core concepts in React-RxJS

Bind and create signals

React-RxJS utilizes the bind() function and createSignal() function for reactive state management. The createSignal() function from @react-rxjs/utils is comparable to using a subject and acts as an entry point for React-RxJS. It separates the producer and consumer of a subject, enabling the creation of an entry point for your streams.

import { createSignal } from '@react-rxjs/utils';

// Create a signal for new to-dos.
const [newTodo$, postNewTodo] = createSignal<string>();

// Example usage in a component.
const TodoForm = () => {
  const [todo, setTodo] = useState('');

// Example usage in a component.
const TodoForm = () => {
  const [todo, setTodo] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    postNewTodo(todo);
    setTodo('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
        placeholder="Add a new to-do"
      />
      <button type="submit">Add To-Do</button>
    </form>
  );
};

For example, in a local to-dos app, you can define your state using createSignal() to handle new to-dos. In this case, the TodoForm component can directly call postNewTodo() whenever the user adds a to-do, and the change will be updated in the to-do list.

The bind() function connects a stream to a hook, and it returns a tuple that contains the hook and the underlying shared observable. This underlying observable can then be used by other streams. Following is an example of using bind() and createSignal() to manage a counter.

import { bind } from '@react-rxjs/core';
import { createSignal } from '@react-rxjs/utils';
import { map, scan } from 'rxjs/operators';

// Create a signal for incrementing the counter.
const [increment$, increment] = createSignal<void>();

// Create a stream that calculates the counter value.
const counter$ = increment$.pipe(
  scan((count) => count + 1, 0)
);

// Bind the stream to a hook.
const [useCounter, counterObservable] = bind(counter$, 0);

// Example usage in a component.
const Counter = () => {
  const count = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Connect observables to components

To subscribe to RxJS streams within your React components, you can use React-RxJS utilities.

First, let’s set up a simple counter observable and bind it to a hook.

import { bind, Subscribe } from '@react-rxjs/core';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';

// Create a stream that emits a value every second.
const counter$ = interval(1000).pipe(
  map((value) => value + 1)
);

// Bind the stream to a hook.
const [useCounter, counterObservable] = bind(counter$, 0);

Now, let’s use the component to connect the observable to our React component.

import React from 'react';

const Counter = () => {
  const count = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
};

const App = () => (
  <Subscribe source$={counterObservable}>
    <Counter />
  </Subscribe>
);

export default App;

The primary utility is the component. The component renders its children after subscribing to the source$ observable. Initially, it renders null, and then it will render the children once it has subscribed to the stream. It also subscribes to all observables utilized by its children, as if it were a React context. In cases where the default value is provided to the bind() function and no subscribers are present, the component will return the default value on the first render and subscribe to the source after mounting. If there is an active subscription before mounting, the component will retrieve the current value directly.

For components that don’t have a default value, ensure an active subscription to the observable before the component using the hook is invoked. The component is a helpful tool for managing this.

Shared state across components

React-RxJS enables the sharing of the reactive state among multiple components. This is made possible because bind()uses the shareLatest operator. The shareLatest operator multicasts the stream, resulting in a single subscription to the source. Consequently, any changes are propagated to all subscriptions associated with the shared stream.

Building on the previous example, multiple components can utilize useFirst5SpacedNumbers to access and display the shared counter state.

const NumberDisplay1 = () => {
  const count = useCounter();
  return (
    <div>
      <p>Number Display 1: {count}</p>
    </div>
  );
};

const NumberDisplay2 = () => {
  const count = useCounter();
  return (
    <div>
      <p>Number Display 2: {count}</p>
    </div>
  );
};

const App = () => (
  <Subscribe source$={counterObservable}>
    <NumberDisplay1 />
    <NumberDisplay2 />
  </Subscribe>
);

In this scenario, both the NumberDisplay1 and NumberDisplay2 components will display the same counter value, reflecting the shared state facilitated by React-RxJS.

Error handling

Error handling is addressed in React-RxJS by leveraging React’s error boundaries. If an error occurs in a stream, the error will be propagated to the nearest error boundary defined for the component that uses the stream, enabling graceful error recovery. When a stream encounters an error, it is immediately closed. Then, if the recovery strategy involves retrying, the & boundary will resubscribe to the stream, effectively starting a new subscription from the beginning.

React-RxJS offers a comprehensive approach to reactive state management, encompassing error handling, shared state management, and connecting observables to components.

Real-world use cases

Asynchronous data fetching

React-RxJS is effective for fetching data from APIs and displaying it in React components. Consider an example of fetching a list of to-dos from a JSONPlaceholder API.

import { bind, Subscribe } from '@react-rxjs/core';
import { fromFetch } from 'rxjs/fetch';
import { switchMap } from 'rxjs/operators';

const [useTodos, todos$] = bind(
  fromFetch('https://jsonplaceholder.typicode.com/todos').pipe(
    switchMap((response) => response.ok ? response.json() : throw new Error('Failed to fetch todos'))
  ), 
  [] 
);

const Todos = () => {
  const todos = useTodos();
  return (<ul>{todos.map((todo) => (<li key={todo.id}>{todo.title}</li>))}</ul>); 
};

const App = () => (<Subscribe source$={todos$}><Todos /></Subscribe>);

The fromFetch function initiates the API request. switchMap handles the response, parsing it as JSON if successful or throwing an error if it fails. bind connects the observable to the custom hook useTodos, providing an initial empty array while fetching data. The Todos component utilizes useTodos to display the fetched data. The App component uses the component to subscribe to todos$ and update the Todos component with the fetched data.

Event streams

React-RxJS simplifies the handling of user interaction streams, such as button clicks and search input changes. Following is how to create a search autocomplete that captures user input using fromEvent and bind.

import { bind, Subscribe } from '@react-rxjs/core';
import { fromEvent } from 'rxjs';

const [useSearchTerm, searchTerm$] = bind(fromEvent(searchInput, 'input'), '');

const App = () => (
  <input type="text" onChange={(e) => useSearchTerm(e.target.value)} />
);

In the previous code example, fromEvent creates an observable, searchTerm$, that emits the search input’s value on user input. bind connects searchTerm$ to the useSearchTerm hook. The App component renders an input field. Use useSearchTerm to update the search term when the input changes.

Global state management

While not a direct replacement for dedicated state management libraries like Redux, React-RxJS can handle global state management in some cases.

Let’s imagine you want to manage a dark theme preference globally in your app. The following code example illustrates a simplified implementation.

import { bind, createSignal, Subscribe } from '@react-rxjs/core';

// Create a signal for managing the dark mode state.
const [useDarkMode, darkMode$] = bind(createSignal(false), false);

// Component to toggle dark mode.
const DarkModeToggle = () => {
  const darkMode = useDarkMode(); 
  const toggleDarkMode = () => useDarkMode(!darkMode);

  return <button onClick={toggleDarkMode}>Toggle Dark Mode</button>;
};

// A component that reacts to dark mode changes.
const MyComponent = () => {
  const darkMode = useDarkMode();
  return <div className={darkMode ? 'dark-mode' : 'light-mode'}>My Component</div>;
};

// Main application component.
const App = () => (
  <Subscribe source$={darkMode$}>
    <DarkModeToggle />
    <MyComponent />
  </Subscribe>
);

In the previous example, createSignal is used to create a signal that manages the darkMode state. bind connects this signal to the useDarkMode hook, which components can use to access and update the state. The component in the App component ensures that both the DarkModeToggle and MyComponent will react to changes in the darkMode state.

Comparing React-RxJS with other solutions

React’s built-in state management

React’s built-in hooks, like useState and useReducer, are suitable for managing simple states within components. However, as state complexity grows and asynchronous operations become involved, React-RxJS offers a more declarative and manageable approach.

Other state management tools (Redux, MobX, Zustand)

Redux offers a robust and widely used solution for global state management, but it can introduce boilerplate code. MobX provides a reactive approach but relies on object-oriented programming. Zustand is a lightweight state management library that emphasizes simplicity. React-RxJS shines when:

You need to manage complex, asynchronous data streams.
You prefer a declarative and composable approach to state management.
You want to reduce prop drilling and improve component isolation.

In situations where state management requirements involve intricate asynchronous data flows, React-RxJS can be a strong choice over alternatives.

Best practices for using React-RxJS

Organize code for scalability

To enhance code scalability, it’s advisable to separate observables and signals from your React components. This separation promotes better organization and maintainability. A suggested approach is to create dedicated files or modules to house your observables and signals. For instance, you could have a services directory where you define and export your RxJS streams. By centralizing this logic, you improve code reusability and reduce potential conflicts.

Minimize subscriptions in components

To prevent memory leaks in your React app, it’s essential to minimize subscriptions within components. When a component subscribes to an observable, it establishes a connection that needs to be terminated when the component unmounts. If this connection is not properly closed, it can lead to memory leaks.

Utilize the component from React-RxJS to manage subscriptions effectively. The component handles the subscription to the observables and automatically unsubscribes when the component unmounts, ensuring proper cleanup.

Use RxJS operators wisely

RxJS operators provide powerful tools for manipulating and transforming data streams. However, it’s important to use operators to maintain stream clarity and performance. Employ operators that align with your specific use case. For example, if you need to limit the rate of emissions from an observable, consider using debounceTime or throttleTime.

Thorough testing of your RxJS logic is recommended to ensure streams behave as expected and that performance is not negatively impacted.

Benefits of React-RxJS

Efficient asynchronous operations: React-RxJS provides a structured way to handle asynchronous operations, simplifying the management of complex async flows and avoiding callback hell and deeply nested promises.
Reactive state management: RxJS observables empower developers to manage and react to changes in app state in a declarative and responsive way.
Declarative event handling: Observables allow you to declare how your components should respond to user interactions and events, resulting in more maintainable and understandable code.
Streamlined data flow: RxJS enables the orchestration of data flow among different parts of your app, simplifying data synchronization. React-RxJS is particularly well-suited for apps with complex data streams and asynchronous workflows. Whether you’re dealing with real-time updates, user interactions, or API calls, React-RxJS can simplify your state management and event-handling logic.

Conclusion

React-RxJS bridges the gap between React’s pull-based architecture and RxJS’s push-based approach, facilitating the creation of scalable and reactive React apps. By combining these two technologies, developers can manage state in a declarative and efficient manner, reducing the complexity often associated with asynchronous operations and event handling.

RxJS for React: Unlocking Reactive States