73

When to use RxJS?

RxJS is preferred to use when your project contains lots of async task handling. It is the right choice for these conditions. RxJS is loaded by default with the Angular project.

Why use RxJS?

We have used many JavaScript async libraries such as JQuery, Async.js, Q.js, or others, and everyone has their own preference, but they all have some drawbacks. RxJS is preferred overall because by combining the functional and reactive programming paradigms, RxJS will help you resolve the following issues:

• Most used control flow structures such as for and while loops don’t work well together with asynchronous functions because they are not async compatible. So, they are unaware of wait time or latency between iterations.
• Error-handling strategies become complicated when you begin nesting try/catch blocks within each callback. RxJS provides an error-handling approach from a functional perspective.
• The business logic is tightly coupled within the nested callback structure, and it makes the code complex. The more nested your code is, the harder it will be in terms of readability and complexity. RxJs provides an ideal way to create reusable and modular components in order to have loosely coupled business logic that can be maintained and unit tested independently.
• Excessive use of closures is not a good practice in programming, but functions in JavaScript create a closure around the scope in which they are declared. When you nest them, you have to be concerned about the state of the variables passed in as arguments and the state of all external variables surrounding each function declaration, causing side effects to occur. These side effects increase the state’s cognitive load and make it difficult to keep track of the code. RxJS provides a way to deal with the side effects of this problem.
• RxJS provides an ideal and easy mechanism to cancel events cleanly after some predetermined amount of time. Implementing your cancellation mechanism can be very challenging and error prone even with the help of third-party libraries.
• Good quality of the responsive design is always throttling a user’s interaction with any UI components so that the system isn’t unnecessarily overloaded. RxJS tells you how to use throttling and debouncing to get rid of unnecessary overload. To get a manual solution for achieving this is very hard to get right and involve functions that access data outside their local scope, which breaks your entire program’s stability.

The above image shows the program execution in RxJS. RxJS treats asynchronous data flows with a programming model that resembles a simple chain of sequential steps.

---