use-observable.ts

import { useState, useMemo, useEffect } from 'react';
import { Observable, BehaviorSubject } from 'rxjs';

// It's like the `useObservable` from 'rxjs-hooks' but with a better interface.
function useObservable<State>(
  input$: Observable<State>,
  initialState?: State,
) {
  const [state, setState] = useState(initialState);
  const state$ = useMemo(() => new BehaviorSubject(initialState), []);

  useEffect(() => {
    const sub = state$.subscribe(x => setState(x));
    return sub.unsubscribe.bind(sub);
  }, [state$]);

  useEffect(() => {
    const sub = input$.subscribe(state$.next.bind(state$));
    return sub.unsubscribe.bind(sub);
  }, [input$]);

  return state;
}

export default useObservable;