Custom API hook to handle network requests

useAPI.ts

import axios, { AxiosRequestConfig } from "axios";
import React, { useEffect, useState } from "react";
import { HttpError, HttpRequestConfig, HttpResponse } from "../models/api";

/**
 * Custom API hook to handle network requests.
 *
 * @param {HttpRequestConfig} config
 * @param {(response: HttpResponse) => void} onSuccessCallback
 * @param {(error: HttpError) => void} onErrorCallback
 * @return {any[]}
 */
export const useAPI = (
    config: HttpRequestConfig,
    onSuccessCallback?: (response: HttpResponse) => void,
    onErrorCallback?: (error: HttpError) => void
) => {
    const [ response, setResponse ] = useState(null);
    const [ isLoading, setIsLoading ] = useState(false);
    const [ error, setError ] = useState(null);

    const fetchData = () => {
        setIsLoading(true);
        makeAxiosRequest(config)
            .then((res) => {
                setResponse(res);
                onSuccessCallback(res);
            })
            .catch((err) => {
                setError(err);
                onErrorCallback(err);
            });
    };

    useEffect(() => {
        fetchData();
    }, []);

    return [ response, isLoading, error, fetchData ];
};

/**
 *
 * @param {AxiosRequestConfig} config
 * @return {AxiosPromise<any>}
 */
const makeAxiosRequest = (config: AxiosRequestConfig) => {
    return axios.request(config);
};