The RxJS race function comes to a standstill if neither stream completes

Consider the code snippet below:

import { interval, race, Subject } from 'rxjs'; 
import { mapTo } from 'rxjs/operators';

const a$ = new Subject<number>();
const b$ = interval(1000).pipe(mapTo(1));
race([a$, b$]).subscribe(console.log);
a$.subscribe({complete: () => console.log('a$ completed!')});

[1,2,3,4,5,6,7].map(i => a$.next(i));

When running this code, the output in the console is shown as 1...7. Initially, my expectation was to see an output of 1, 2, 3, 4, 5, 6, 7, followed by multiple occurrences of value 1 from observable b$. However, it seems that after all values are emitted from array a$, the values from b$ do not get passed. So, why is this happening? Does the race operator somehow recognize that a$ has finished emitting values, preventing b$ from continuing?

Answer №1

When all values from the array have been emitted through a$, why do the values emitted from b$ not pass through?

The answer to this question lies in the official documentation of the race operator.

This operator selects the observable that emits first.

Due to the immediate execution of the map function on your array, it finishes before any emissions from b$, causing a$ to always "win" the race and be logged to the console. As a result, b$ never wins nor completes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Type narrowing not functioning as expected based on the specific data types

I've encountered an issue with type narrowing in my code that is leading to a compiler error. Strangely, making subtle changes to the types involved allows the compiler to pass without errors. These types have some overlap and include optional attribu ...

Encountering an Issue: The formGroup function requires an instance of a FormGroup. Kindly provide one

I am a beginner with Angular 2 and despite reviewing numerous stack overflow answers, I still can't resolve my issue. I have recently started learning about angular reactive forms and wanted to try out my first example but I'm facing some diffic ...

Is there a way to instruct Babel to generate polyfills such as `__createClass` only once for multiple files?

In my project, I have multiple ES6 files, each containing at least one class. For every file, the __createClass, __interopRequireDefault, and __classCallback polyfilling functions are generated. I plan to concatenate them using browserify, but it seems re ...

Mocking a named class-export in TypeScript using Jest

I have a node module that exports several classes, including one called Client, which I utilize to create clients with various APIs as methods. I'm currently attempting to test my module, which has a dependency on this node module, using Jest. Howeve ...

retrieving information from an array nested within a JSON object in an Angular application

I am struggling to retrieve two specific values from a JSON object. The content of the JSON is as follows: [ { "type":"session_start", "properties":[ { "property":"activity&q ...

The value 'var(--header-position)' cannot be assigned to type 'Position or undefined'

Description of Issue I am attempting to utilize a CSS Custom Property to customize a component within a nextjs application using TypeScript. Strangely, all CSS properties accept the CSS variables except for the position property which triggers the error b ...

What causes functions operating on mapped objects with computed keys to not correctly infer types?

If you are seeking a way to convert the keys of one object, represented as string literals, into slightly modified keys for another expected object in Typescript using template string literals, then I can help. In my version 4.9.5 implementation, I also ma ...

Accessing a targeted XML file within a document using Office.js in a Word Add-In

I am struggling to load the file named item1.xml from the ..\customXml folder of my document into my Word Add-In. So far, I have attempted the following: var url = Office.context.document.url + '\\customXml\\item1.xml\& ...

Issue with Validators in Model-driven Forms

Currently conducting testing on a basic application. These are the files in use: home.component.ts import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; @Componen ...

Exciting Update: Next.js V13 revalidate not triggering post router.push

Currently using Next.js version 13 for app routing, I've encountered an issue with the revalidate feature not triggering after a router.push call. Within my project, users have the ability to create blog posts on the /blog/create page. Once a post is ...

fetching data with Contentful and GatsbyJS

I am currently working on fetching data from Contentful using GraphQL within a Gatsby application, and here is my approach: type AllContentfulBlogs = { allContentfulBlogs: { nodes: Array<{ title?: string | null | undefined, ...

Angular 2 error: "unknown element" issue persists despite exhausting all attempted solutions

Here's a typical scenario where I attempt to incorporate a component from another module : External component : import { Component, ViewEncapsulation, ElementRef, ViewChild, Input, Output, EventEmitter } from '@angular/core'; declare ...

What is the process for converting/executing TypeScript into JavaScript?

Having trouble running https://github.com/airgram/airgram Encountering this warning message from the post (node:9374) Warning: To load an ES module, set "type": "module" Have already added {"type": "module"} To pa ...

Tips for managing the data type of a bound value through ngModel: preventing number distortion to string

I posted a query and managed to solve it. However, I observed that even though the provided data consists of objects defined like this: export interface GisPoint { e: number; n: number; } when a user inputs a value, the original content changes from { e: ...

The compiler is still throwing missing return errors despite narrowing down all potential types

I encountered the following issue: Function is missing a closing return statement and its return type does not include 'undefined'. Here's my TypeScript code snippet: function decodeData( data: string | number[] | ArrayBuffer | Uint8Arr ...

Best practices for using useEffect to fetch data from an API_FETCH in a certain condition

When retrieving state from an API using Zustand within a useEffect function, what is the recommended approach to do so? Currently, my implementation is quite straightforward: export interface ModeState{ modes: Mode[]; fetchModes: () => void; } expo ...

What is the best way to adjust and filter an array based on a single value?

Here is an array that needs to be modified: [ {name: "test", value: "test", group: 0}, {name: "test1", value: "test2", group: 0}, {name: "test3", value: "test3", group: 1}, {name: "te ...

Trouble with Nested Routing in React Router Version 6: Route not Rendering

I'm facing issues nesting a path within another path in react-router-dom version 6. When I try to visit the nested argument's page (/blog/1), it shows up as a blank non-styled HTML page. However, when I add a child path to the root like /blog, it ...

Testing Angular 2 components with material icons and images

Recently, I finished creating a unique component that showcases an image, material icons, and a custom directive known as ticker. This directive allows for scrolling text if it exceeds the width of the element. https://i.stack.imgur.com/GpDSr.png My next ...

What role does typescript play in this approach?

test.js const testList = [1, 2, 2, 4, 5, 2, 4, 2, 4, 5, 5, 6, 7, 7, 8, 8, 8, 1, 4, 1, 1]; const lastIndex = testList.findLastIndex((e:number) => e === 100); // Property 'findLastIndex' does not exist on type 'number[]'. Did you mean ...