React Hook For Asynchronous Data Fetching With Error Handling

/**
 * @param {string} url - The URL of the API endpoint to fetch data from
 * @param {object} options - Options for the fetch request
 * @return {object} An object containing the data, loading state, and error state
 * @throws {Error} If the fetch request fails
 */
import { useState, useEffect, useCallback } from 'react';

const useAsyncData = (url, options) => {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);

   const fetchFunction = useCallback(async () => {
      try {
         const response = await fetch(url, options);
         if (!response.ok) {
            throw new Error(response.statusText);
         }
         const jsonData = await response.json();
         setData(jsonData);
      } catch (error) {
         setError(error.message);
      } finally {
         setLoading(false);
      }
   }, [url, options]);

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

   return { data, loading, error };
};

export default useAsyncData;