title: How to re-trigger hook without useEffect or a setState function?
body: <p>I am using a custom hook that takes a URL as an argument and returns fetch data and its loading state. So, unlike most hooks, I do not have a function to set a new state when needed and this is causing all kinds of problems at this point in the project because I happen to need a way to re-trigger that custom hook everytime it receives new props values.</p>
  
  <p>The issue is, as expected, the state of the component is being set upon components first render but as it receives new props it does not re-render/re-trigger. </p>
  
  <p>This is how the custom hook looks like:</p>
  
  <pre><code>//useFetch.js
  
  import { useState, useEffect } from "react";
  
  function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
  
    async function fetchUrl() {
      const response = await fetch(url);
      const json = await response.json();
      setData(JSON.parse(JSON.stringify(json)));
      setLoading(false);
    }
  
    useEffect(() =&gt; {
      fetchUrl();
    }, []);
  
    return [data, loading];
  }
  
  export { useFetch };
  </code></pre>
  
  <p>and this is how I am using this hook:</p>
  
  <pre><code>//repos.js
  
  import React from "react";
  import { useFetch }  from "./fetchHook";
  
  
  function Repos(props) {
    const [userRepos, reposLoading] = useFetch(`https://api.github.com/users/${props.users[props.count].login}/repos`);
  
    return reposLoading ? (
      &lt;div className="App"&gt;
        stuff to render if it's still loading
      &lt;/div&gt;
    ) : (
      &lt;div
       stuff to render if it's loaded
      &lt;/div&gt;
    );
  }
  </code></pre>