React with RxJS

A set of hooks, HOCs, and components for creating and consuming RxJS observables.

Historically, React uses a pull-based architecture. This means that when React needs to re-render, it will call the render function of every affected component. This will return a new representation of the UI, which React can reconcile with the previous one. Any changes are then propagated to the DOM.

This kind of behavior is called pull because the consumer (in this case, React), is the one that requests the new value.

On the other hand, RxJS uses a push-based approach, where you declaratively define streams and their relationships, and RxJS will propagate every change from one stream to the next one.

This is called push because now the producer of the state is responsible for pushing the new value over to those that are subscribed to it. This benefit of this is that only those entities that depend on the value that has changed will update, and it can be done without having to make comparisons or detect changes.

Not only can this approach significantly improve performance, it also makes state management more declarative, in a way that can be read top-to-bottom.

Installation

Run either of the following commands depending on your package manager. Both RxJS and React are required as peer dependencies.

NPM -

npm install react-with-rxjs

Yarn -

yarn add react-with-rxjs