RxJS yang ditanyakan di interview Angular

1. Observable vs Promise

Anda sudah kenal Promise dari fetch(). RxJS menyebut Observable sebagai "lazy Push collections of multiple values" ^[1]: sama-sama push seperti Promise, tapi lazy dan bisa berisi banyak nilai. Dokumentasi Angular v16 merangkum bedanya ^[2]:

Akibat praktisnya di Angular: HttpClient mengembalikan Observable, dan "the method doesn't begin its HTTP request until you call subscribe()". Sebaliknya, "Subscribing twice results in two HTTP requests" ^[3]. Lupa subscribe berarti tidak ada request sama sekali, sesuatu yang tidak pernah terjadi dengan fetch.

// React + fetch: langsung jalan
useEffect(() => { fetch('/api/products').then(r => r.json()).then(setProducts); }, []);

// Angular: baru jalan saat subscribe
this.http.get<Product[]>('/api/products')
  .pipe(map(list => list.filter(p => p.stock > 0)))   // seperti .then(transform)
  .subscribe(list => (this.products = list));          // seperti .then(setProducts)

2. Subject dan BehaviorSubject: state bersama di service

"An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers". "Every Subject is an Observable" dan "Every Subject is an Observer", jadi Anda bisa subscribe sekaligus memanggil next(v). BehaviorSubject "has a notion of 'the current value'": ia "stores the latest value emitted to its consumers" dan langsung mengirimkannya ke subscriber baru ^[4].

Inilah pola Angular Service untuk state bersama (padanan React: state di Context Provider, atau store Zustand):

@Injectable({ providedIn: 'root' })
export class CartService {
  private readonly items = new BehaviorSubject<Product[]>([]);   // wajib nilai awal
  readonly items$ = this.items.asObservable();                     // luar hanya bisa subscribe

  add(p: Product) { this.items.next([...this.items.value, p]); }  // seperti setState
}

Pakai Subject biasa untuk event (subscriber baru tidak butuh nilai lama), BehaviorSubject untuk state. ReplaySubject mengulang beberapa nilai lama ke subscriber baru ^[4].

3. Operator inti: empat yang hampir pasti ditanyakan

"Operators are functions" yang dirangkai di dalam pipe() ^[5]. map sama seperti Array.map, tapi untuk setiap nilai yang lewat. Yang membedakan kandidat adalah keluarga flattening: operator yang memetakan setiap nilai ke Observable baru (biasanya request HTTP).

Tiga operator lain yang melengkapi jawaban:

• debounceTime(ms): "Emits a notification from the source Observable only after a particular time span has passed without another source emission" ^[10]. Padanan React: hook useDebounce.
• catchError: "Catches errors on the observable to be handled by returning a new observable or throwing an error" ^[11]. Padanan: .catch() pada Promise.
• forkJoin: "Wait for Observables to complete and then combine last values they emitted" ^[12]. Padanan: Promise.all. Kalau satu error, forkJoin ikut error.

Search box di dokumentasi Angular v16 memakai rangkaian ini ^[13] (disesuaikan ke Product Catalog):

this.results$ = this.searchControl.valueChanges.pipe(
  filter(text => text.length > 2),
  debounceTime(300),                 // tunggu user berhenti mengetik
  distinctUntilChanged(),            // abaikan kata kunci yang sama
  switchMap(term => this.products.search(term).pipe(
    catchError(() => of([]))         // satu request gagal tidak mematikan stream
  )),
);

Kenapa catchError ditaruh di dalam switchMap? Kalau error sampai ke stream luar, stream itu selesai dan search box berhenti bekerja.

4. Mencegah memory leak: async pipe dulu, takeUntil kalau perlu

Lesson 0013 sudah mengutip aturan Angular di ngOnDestroy: "Unsubscribe Observables and detach event handlers to avoid memory leaks" ^[14]. Subscription manual ke stream yang tidak pernah selesai (interval, valueChanges, BehaviorSubject di service) tetap hidup setelah component dihancurkan. Padanan React: useEffect tanpa fungsi cleanup.

1. async pipe (pilihan utama). Ia "subscribes to an Observable or Promise and returns the latest value it has emitted", dan "When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks" ^[15].

   <li *ngFor="let p of results$ | async">{{ p.name }}</li>

2. takeUntil (kalau harus subscribe di class). Ia meneruskan nilai "until a notifier Observable emits a value", lalu complete ^[16].

   private readonly destroy$ = new Subject<void>();
   
   ngOnInit() {
     this.cart.items$.pipe(takeUntil(this.destroy$))   // taruh di akhir pipe
       .subscribe(items => (this.count = items.length));
   }
   ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); }

Di v16 juga ada takeUntilDestroyed() dari @angular/core/rxjs-interop, "Operator which completes the Observable when the calling context (component, directive, service, etc) is destroyed", tapi statusnya masih developer preview ^[17]. Sebut sebagai alternatif baru; jawab dengan async pipe dan takeUntil dulu.

Ringkasan untuk dicetak: Reference: RxJS untuk interview Angular 16 · Istilah: GLOSSARY.md

Ada yang belum jelas? Tanyakan ke saya (agent) di terminal, misalnya: "apakah subscription ke HttpClient juga wajib di-unsubscribe?" atau "kapan saya pakai combineLatest dan bukan forkJoin?"