Sign in
Skip to solution
hardFrontend

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

542 views
01

Understand the problem

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

rxjscaching
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

shareReplay(1) converts a cold observable into a hot multicasted observable that buffers the latest emission. Subsequent subscribers receive the cached response immediately instead of triggerring a new HTTP call, ideal for shared app config.

Solution ready — 2 min read

Classified // press E to declassify

04

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 })
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 99 of 121 decoded in the Angular track. One more won't hurt.

Back to track