Custom react hook for calling a data endpoint

useDataApi.jsx

import { useEffect, useState, useRef } from "react";
export const useDataApi = () => {
  const firstUpdate = useRef(true);
  const [error, setError] = useState(false);
  const [apiUrl, setApiUrl] = useState("");
  const [data, setData] = useState(null);
  
  useEffect(() => {
      if (!firstUpdate.current) {
        fetch(apiUrl)
          .then(response => response.json())
          .then(response => {
            setData(response);
          })
          .catch(error => {
            setError(true);
          });
      }
      firstUpdate.current = false;
    }, [apiUrl]);
  return { data, error, callApi: setApiUrl };
};