re: Angular Concepts in React: The Async Pipe VIEW POST

FULL DISCUSSION
 

You could also create a custom hook for this pattern. I have one called useRxjs.

import { some, none, fromNullable } from 'fp-ts/lib/Option';
import { Observable } from 'rxjs'
import { useEffect, useState } from 'react'

const useRxjs = <T>(obs: Observable<T>, init?: T) => {
  const [state, setState] = useState(fromNullable(init));
  const [errorState, setErrorState] = useState(none);
  const [completeState, setCompleteState] = useState(false);

  useEffect(() => obs
    .subscribe(
      n => setState(some(n)),
      e => setErrorState(some(e)),
      () => setCompleteState(true),
    ).unsubscribe, [obs, init]);
  return [state, errorState, completeState];
}
code of conduct - report abuse