hardFrontend

Explain the shareReplay operator in RxJS and how it prevents duplicate HTTP requests.

Q: Explain the shareReplay operator in RxJS and how it prevents duplicate HTTP requests.

**Core concept.** The ** shareReplay() ** operator converts a **cold observable** (runs its execution path for each subscriber) into a **hot observable** (multicasts the same execution stream to all subscribers). It caches (replays) a specified number of emitted values, allowing subsequent subscribers to immediately retrieve the cached data without triggerring new execution flows. Cold Stream shareReplay(1) <path class='d-edge-accent' d='M 310 95 L 380 12

542 views

Understand the problem

Explain hot observables, multicasting, and request caching with shareReplay.

rxjscaching

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Caching HTTP requests using shareReplay

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, shareReplay } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private http = inject(HttpClient);
  
  readonly appConfig$: Observable<any> = this.http.get('/api/config').pipe(
    shareReplay({ bufferSize: 1, refCount: false })
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is NgRx?

What is the difference between switchMap, mergeMap, concatMap, and exhaustMap?