title: Why doesn't a function dependency in hooks cause infinite renders
body: <p>Following is the snippet <a href="https://codesandbox.io/s/staging-sunset-csqnw" rel="nofollow noreferrer">link to codesandbox</a>:</p>
  
  <pre><code>// function getFetchUrl(query) {
  //   return "https://hn.algolia.com/api/v1/search?query=" + query;
  // }
  function App() {
    const [reactResult, setReactResult] = useState(null);
    const [reduxResult, setReduxResult] = useState(null);
    function SearchResults() {
      //  Re-triggers all effects on every render
      // const getFetchUrl = useCallback((query) =&gt;  {
        // return "https://hn.algolia.com/api/v1/search?query=" + query;
      // }, []);
  
  
       function getFetchUrl(query) {
         return "https://hn.algolia.com/api/v1/search?query=" + query;
       }
  
      useEffect(() =&gt; {
        console.log("running effect: 15");
        setReactResult(getFetchUrl("react"));
        // ... Fetch data and do something ...
        // }, [getFetchUrl]); //  Deps are correct but they change too often
      }, [getFetchUrl]);
  
      useEffect(() =&gt; {
        console.log("running effect: 21");
        setReduxResult(getFetchUrl("redux"));
        // ... Fetch data and do something ...
        // }, [getFetchUrl]); //  Deps are correct but they change too often
      }, [getFetchUrl]);
  
      // ...
    }
  
    SearchResults();
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;{reactResult}&lt;/h2&gt;
        &lt;h2&gt;{reduxResult}&lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>The output in the console is </p>
  
  <pre><code>running effect: 15
  running effect: 21
  running effect: 15
  running effect: 21
  </code></pre>
  
  <p>I have checked out the <a href="https://stackoverflow.com/a/56178910/7879090">this</a> answer, and I get it that the functions get re-defined which causes the <code>useEffect</code> to run again(for the second time). But I want to clarify one doubt: </p>
  
  <p>When the <code>useEffect</code> runs for the second time, it calls the <code>stateSetter</code> functions(which asks React to render the component again). </p>
  
  <p>So shouldn't the above snippet run in an infinite loop?</p>
  
  <p>Example and basic understanding picked up from <a href="https://overreacted.io/a-complete-guide-to-useeffect/" rel="nofollow noreferrer">A Complete Guide to useEffect</a></p>