A generic react fetch hook

useFetch.jsx

import { useState } from 'react';

function useFetch({ onSuccess, onError }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleFetch = async (url, options = {}) => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch(url, options);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const jsonData = await response.json();
      setData(jsonData);
      if (onSuccess) {
        onSuccess(jsonData);
      }
    } catch (err) {
      setError(err);
      if (onError) {
        onError(err);
      }
    } finally {
      setLoading(false);
    }
  };

  return { data, loading, error, handleFetch };
}

export default useFetch;