title: Can't locate infinite loop in useEffect hook
body: <p>React is throwing the error <code>Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.</code> but I can't see the loop anywhere. Could someone help me out?</p>
  <p>If I do <code>console.log((navs.map((x) =&gt; (x.name === &quot;main-nav&quot; ? x : null))))</code> directly, it returns undefined (as <code>navs</code> is fetched after intial render) so I am forced to check if it is defined with <code>!!navs</code></p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  import { Config } from &quot;../../config&quot;;
  
  export default function Navbar() {
    const [navs, setNavs] = useState();
    const [mainNav, setMainNav] = useState({});
  
    useEffect(async () =&gt; {
      const res = await fetch(`${Config.apiUrl}/navs`);
      const data = await res.json();
      setNavs(data);
    }, []);
  
    !!navs &amp;&amp; setMainNav(navs.map((x) =&gt; (x.name === &quot;main-nav&quot; ? x : null)));
  
    console.log(mainNav);
  
    return (
      &lt;nav&gt;&lt;/nav&gt;
    );
  }
  </code></pre>