Am I using observable-hooks correctly?

[nareshbhatia]

Hi, I am new to rxjs & observable-hooks and was wondering if I was using these libraries correctly. Please see my example below (full code here). This code fetches some movies using fromFetch and stores them in a BehaviorSubject. It then uses useObservableState to transfer the state to React. Basically, I am trying to reproduce this standard fetching pattern: const {data, isLoading, error } = useQuery(...).

1. Can someone please review this code and suggest a more elegant or alternate way of doing this using observable-hooks?
2. I have kept the 3 BehaviorSubjects inside the component so that multiple instances of this component can have their own data. Is there any advantage to move this state outside the component, effectively making it a singleton? (In general, I don't like singletons because they live forever and make the state global.)

export function MovieMagicBehaviorSubject() {
  // RxJS state is stored here in BehaviorSubject
  const movies$ = useMemo(() => new BehaviorSubject<Movie[]>([]), []);
  const loading$ = useMemo(() => new BehaviorSubject<boolean>(true), []);
  const error$ = useMemo(
    () => new BehaviorSubject<string | undefined>(undefined),
    [],
  );

  // Connect RxJS state to React state using useObservableState
  const movies = useObservableState<Movie[]>(movies$, []);
  const loading = useObservableState<boolean>(loading$, true);
  const error = useObservableState<string | undefined>(error$, undefined);

  useEffect(() => {
    // Create an Observable that fetches top 10 movies
    const data$ = fromFetch(
      'https://movie-magic-rest-api-221d9114e329.herokuapp.com/movies?sort=RANK_ASC&page=1&perPage=10',
      {
        selector: async (response) => response.json(),
      },
    );

    // Subscribe to the data$ observable
    const data$Subscription = data$.subscribe({
      next: (response) => {
        movies$.next(response.movies as Movie[]);
        loading$.next(false);
      },
      error: (error: Error) => {
        error$.next(error.message);
        loading$.next(false);
      },
    });

    return () => {
      data$Subscription.unsubscribe();
    };
  }, [error$, loading$, movies$]);

  ...
  return <MovieList movies={movies} />;
}

[crimx]

Hi, I would not recommend using BehaviorSubject for state management in React. There are better options like Signals. RxJS as far as I am concerned is more suitable for orchestrating sequence of asynchronous operations.

    // Subscribe to the data$ observable
    const data$Subscription = data$.subscribe({
      next: (response) => {
        movies$.next(response.movies as Movie[]);
        loading$.next(false);
      },
      error: (error: Error) => {
        error$.next(error.message);
        loading$.next(false);
      },
    });

This is not a very idiomatic way to write RxJS. In RxJS you normally consume the value at the end of a flow by subscribing it. If you want to change the value in the flow or move it to a new flow, you generally pipe the flow with operators, so that you can have a clear view of the single source of truth.

Here if you want to reproduce const {data, isLoading, error } = useQuery(...)

import { switchMap, catchError, startWith } from "rxjs";
import { fromFetch } from "rxjs/fetch";
import { useObservable, useObservableState } from "observable-hooks";

function useQuery(url) {
  const result$ = useObservable(
    inputs$ => inputs$.pipe(
      // switchMap will auto-cancel the last subflow so you don't get stale responses.
      switchMap(([url]) => fromFetch(url).pipe(
        switchMap(async response => {
          if (response.ok) {
            return { data: await response.json(), isLoading: false };
          } else {
            return { error: `Error ${response.status}`, isLoading: false };
          }
        }),
        // catch error in subflow so that error won't kill the main flow
        catchError(err => of({ error: err.message, isLoading: false })),
      )),
      startWith({ isLoading: true })
    ),
    [url]
  );
  return useObservableState(result$);
}

[nareshbhatia]

Hi @crimx, thank you so much for a detailed and thoughtful response.

1. I have implemented your version of useQuery here with some enhancements for type safety. Hopefully it still maintains the essence of your code.
2. I am curious what useObservableState uses internally to store state (if not BehaviorSubject).
3. You mentioned that "RxJS is more suitable for orchestrating sequence of asynchronous operations". Could you provide some real life examples in complex domains such as autonomous vehicles or autonomous drones? The examples I have seen so far are trivial and do not give me an appreciation for RxJS.

[crimx]

Hi @nareshbhatia the code looks good.

useObservableState uses BehaviorSubject under the hood. (I am exploring ways to do it without BehaviorSubject.)

I have used RxJS for socket messaging, key combination recognition, typeahead and advanced animations. Basically, when the state of something changes over time and I need to compute based on its previous state or the previous N states, I want the RxJS mental model which gives you the 4th dimension view of the state snapshots in time slices. Otherwise I prefer the Signal reactivity model.

[nareshbhatia]

Makes sense. Thank you for your insights.

[crimx]

Hi @nareshbhatia . Glad that it helps. In a recent fun project I really enjoyed the simplicity of expand which is useful for pagination data fetching. Edge cases are easily handled.