codedsaif-react-hooks/hooks/useFetch.js

To make it easy for you to get started with GitLab, here's a list of recommended next steps.

import { useState, useEffect } from "react";
/**
 * Custom hook to fetch data from an API.
 * @param {string} url - The URL to fetch data from.
 * @param {object} options - Optional fetch options (headers, method, etc.).
 * @returns {{ data: any, loading: boolean, error: string|null }} - The fetched data, loading state, and error message.
 * @example
 * const { data, loading, error } = useFetch("https://api.example.com/users");
 * if (loading) return <p>Loading...</p>;
 * if (error) return <p>Error: {error}</p>;
 * return (
 *   <ul>
 *     {data.map(user => (
 *       <li key={user.id}>{user.name}</li>
 *     ))}
 *   </ul>
 * );
 */
function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url, options);
        if (!response.ok) throw new Error("Network response was not ok");
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;