useSubscription

useSubscription.ts

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

export const useSubscription = (fn: () => Subscription, inputs: any[]) => {
  return useEffect(() => {
    const subscription = fn();
    return () => subscription.unsubscribe();
  }, inputs);
};

export const useSubscriptionState = <T>(
  fn: () => Observable<T>,
  inputs: any[]
): [T | null, boolean] => {
  const [state, setState] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);

  useSubscription(
    () =>
      fn().subscribe(n => {
        setState(n);
        setLoading(false);
      }),
    inputs
  );

  return [state, loading];
};