rcrx/src/hooks/subscribe.ts

Rcrx is a lightweight library that provides Rx.js utilities for React applications.

import { useEffect, useRef, useState } from "react";
import { Observable } from "rxjs";

export function useSubscribe<TValue, TReturnValue>(
  observable: Observable<TValue>,
  fn: (value: TValue) => TReturnValue,
  defaultReturnValue?: TReturnValue
) {
  const [value, setValue] = useState(defaultReturnValue);
  const fnRef = useRef<(value: TValue) => TReturnValue>(fn);
  fnRef.current = fn;

  useEffect(() => {
    const subs = observable.subscribe((value) =>
      setValue(fnRef.current(value))
    );
    return () => subs.unsubscribe();
  }, [observable]);

  return value;
}