bruno-use-async.ts

import { useState, useEffect, useCallback } from 'react';

type AsyncState<TData, TError = Error> = {
    status: 'idle' | 'loading' | 'finished' | 'failed';
    data?: TData;
    error?: TError;
};

type AsyncOptions<TArgs> = {
    onLoad?: boolean;
    args?: TArgs;
};

const useAsync = <TData, TArgs extends any[]>(
    asyncFn: (...args: TArgs) => Promise<TData>,
    options?: AsyncOptions<TArgs>,
) => {
    if (options && !options.args) {
        options.args = [] as TArgs;
    }

    const [state, setState] = useState<AsyncState<TData>>({
        status: 'idle',
    });

    const run = useCallback((...args: TArgs) => {
        setState(state => ({
            ...state,
            status: 'loading',
        }));

        asyncFn(...args)
            .then(data =>
                setState({
                    data,
                    status: 'finished',
                    error: undefined,
                }),
            )
            .catch(error => {
                setState(state => ({
                    ...state,
                    status: 'failed',
                    error,
                }));
            });
    }, []);

    useEffect(() => {
        if (options && options.onLoad) {
            run(...options.args);
        }
    }, []);

    return {
        run,
        status: state.status,
        data: state.data,
        error: state.error,
        isLoading: state.status === 'loading',
        isFinished: state.status === 'finished',
    };
};

const sayHello = () => Promise.resolve('Hello!');
const sayHelloWithName = (name: string) => Promise.resolve(`Hello ${name}`);

const { data } = useAsync(sayHello, { onLoad: true });
const { data: secondData } = useAsync(sayHelloWithName, {
    onLoad: true,
    args: ['Ana'],
});