Discussion on: React Custom Hook - useFetch

[alextrastero]

You would need a new hook in that case, one that returns the actual function instead of calling it inside useEffect, something like:

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(null);
  const [error, setError] = useState(null);

  const myFetch = useCallback(() => {
    setLoading('loading...')
    setData(null);
    setError(null);
    axios.get(url).then(res => {
      setLoading(false);
      // checking for multiple responses for more flexibility 
      // with the url we send in.
      res.data.content && setData(res.data.content);
      res.content && setData(res.content);
    })
    .catch(err => {
      setLoading(false)
      setError('An error occurred. Awkward..')
    })
  }, [url]);

  return { myFetch, data, loading, error }
}

[Newton]

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

  const myFetch = useCallback(() => {
    setLoading('loading...')
    setData(null);
    setError(null);
    axios.get(url).then(res => {
      setLoading(false);
      // checking for multiple responses for more flexibility 
      // with the url we send in.
      res.data.content && setData(res.data.content);
      res.content && setData(res.content);
    })
    .catch(err => {
      setLoading(false)
      setError('An error occurred. Awkward..')
    })
  }, [url]);

  useEffect(()=>{
     if(disableFetchOnMount) return
     myFetch()
  },[disabledFetchOnMount, myFetch])

  return { myFetch, data, loading, error }
}

You could also add a parameter to disable the fetch on mount instead of creating a whole new hook.