Skip to content

useObservable

React hook with useSyncExternalStore to subscribe to an observable

TypeScript
useObservable.ts
function useObservable<T>(observable: BehaviorSubject<T>): T {
  let observableRef = useRef<BehaviorSubject<T>>(observable);
 
  if (observableRef.current !== observable) {
    observableRef.current = observable;
  }
 
  const subscribe = useCallback((handleStoreChange: VoidFunction) => {
    const subscription = observableRef.current.subscribe(handleStoreChange);
    return () => subscription.unsubscribe();
  }, []);
 
  const getSnapshot = useCallback(() => {
    return observableRef.current.getValue();
  }, []);
  return useSyncExternalStore(subscribe, getSnapshot);
}