React TypeScript: Custom hook looping infinitely - reactjs

Question

My first attempt at a custom hook is now looping like crazy, I don't fully understand why do I need to test to see if it has something saved in response or error then make the call if it has not?
import React, { useContext } from 'react';
import { Context } from "../components/context";
const useFetch = (url: string, bearer: string, method: string, body: any) => {
const { global } = useContext(Context) as {global: any};
let headers = {'cache-control': 'no-cache', 'Content-Type': 'application/json' };
if (bearer) headers = {...headers, ...{'Authorization': bearer}}
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
const apiUrl = global.apiUrl;
React.useEffect(() => {
const fetchData = async () => {
try {
let res;
if (method === 'GET') res = await fetch(apiUrl + url, {method, headers});
else res = await fetch(apiUrl + url, {method, headers, body});
setResponse(await res.json());
} catch (error) {
setError(error);
}
};
fetchData();
}, [apiUrl, body, headers, method, url]);
return { response, error };
};
export { useFetch }
I'm calling it with
import { useFetch } from '../hooks/fetch';
const res = useFetch('http://api.domain.com', '', 'GET', '')
console.log(res);

Answer 1

Each time you unconditionally change state in useEffects it will loop endlessly because it is calling after each state change, you change state again and again useEffects is calling and so on...
There should be some flag probably, and you fetch data only if flag is not true
const [isLoaded, setIsLoaded] = React.useState(false);
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);
const apiUrl = global.apiUrl;
React.useEffect(() => {
const fetchData = async () => {
if (isLoaded) return
try {
let res;
if (method === 'GET') res = await fetch(apiUrl + url, {method, headers});
else res = await fetch(apiUrl + url, {method, headers, body});
setResponse(await res.json());
setIsLoaded(true)
} catch (error) {
setError(error);
}
};

Answer 2

useEffect gets called anytime one of its dependencies changes. You put in [apiUrl, body, headers, method, url]. Both headers and apiUrl are local variables and recreated everytime the hook is called. This means that the references to those variables will change everytime your useFetch executes.
The useEffect sets a state on success or error which causes the re-render which causes the recreation of those variables which causes the useEffect to be called again.
I recommend removing both of those from the dependency array and moving the variables into your useEffect call as they are only used inside there anyways.