mutoid/react/useFetchObservableResource.js

Reactive library for data fetching, caching, state management

import { useCallback, useState, useRef, useEffect } from 'react';
import { takeUntil } from 'rxjs/operators';
import * as RES from '../http/Resource';
import { useSubscriptionRef } from './useSubscriptionRef';
export function useFetchObservableResource(fetch, options) {
    const [value, setValue] = useState(options?.iniState || RES.init);
    const [subscriptionRef, subscriptionUnsubscribe] = useSubscriptionRef();
    const fetchRef = useRef(fetch);
    const notifierTakeUntilRef = useRef(options?.notifierTakeUntil);
    useEffect(() => {
        fetchRef.current = fetch;
        notifierTakeUntilRef.current = options?.notifierTakeUntil;
    }, [fetch, options]);
    return [
        value,
        useCallback((...p) => {
            subscriptionUnsubscribe();
            const resource$ = fetchRef.current(...p);
            const resourceTaken$ = notifierTakeUntilRef.current
                ? resource$.pipe(takeUntil(notifierTakeUntilRef.current))
                : resource$;
            subscriptionRef.current = resourceTaken$.subscribe(setValue);
        }, [subscriptionRef, subscriptionUnsubscribe]),
    ];
}