Function useObservable

src/useObservable.ts:95–137

(observableId: string, source: Observable<T>, config: ReactFireOptions = {})

}

export function useObservable<T = unknown>(observableId: string, source: Observable<T>, config: ReactFireOptions = {}): ObservableStatus<T> {
  // Register the observable with the cache
  if (!observableId) {
    throw new Error('cannot call useObservable without an observableId');
  }
  const observable = preloadObservable(source, observableId);

  // Suspend if suspense is enabled and no initial data exists
  const hasInitialData = config.hasOwnProperty('initialData') || config.hasOwnProperty('startWithValue');
  const hasData = observable.hasValue || hasInitialData;
  const suspenseEnabled = useSuspenseEnabledFromConfigAndContext(config.suspense);
  if (suspenseEnabled === true && !hasData) {
    throw observable.firstEmission;
  }

  const initialState: ObservableStatus<T> = {
    status: hasData ? 'success' : 'loading',
    hasEmitted: hasData,
    isComplete: false,
    data: observable.hasValue ? observable.value : config?.initialData ?? config?.startWithValue,
    error: observable.ourError,
    firstValuePromise: observable.firstEmission,
  };
  const [status, dispatch] = React.useReducer<React.Reducer<ObservableStatus<T>, 'value' | 'error' | 'complete'>>(reducerFactory<T>(observable), initialState);

  React.useEffect(() => {
    const subscription = observable.subscribe({
      next: () => {
        dispatch('value');
      },
      error: (e) => {
        dispatch('error');
        throw e;
      },
      complete: () => {
        dispatch('complete');
      },
    });
    return () => subscription.unsubscribe();
  }, [observable]);

  return status;
}