title: Why does this create an infinite render loop with React hooks?
body: <p>I am trying to render beer names as H1 elements in a alphabetical sorted order and I'm new to React Hooks but this seems to cause a re-render loop</p>
  
  <p>The Beer component is passed an array of beers as props from the Home component which utilises the useEffect Hook which I suspect may be the culprit although I'm not sure.</p>
  
  <pre><code>const Beer = ({ beer }) =&gt; {
    const [beers, setBeers] = useState([]);
    let rendered;
    if (beer === undefined) {
      rendered = &lt;Spinner /&gt;;
    } else {
      rendered = beer.map(beer =&gt; beer.name);
      setBeers(rendered.sort());
      rendered = beers.map(beer =&gt; &lt;h1&gt;{beer}&lt;/h1&gt;);
    }
  
    return &lt;div&gt;{rendered}&lt;/div&gt;;
  };
  
  const Home = () =&gt; {
    const [beers, setBeers] = useState();
    useEffect(() =&gt; {
      const getBeers = async () =&gt; {
        const beerData = await fetch('https://api.punkapi.com/v2/beers');
        const beers = await beerData.json();
        console.log(beers);
        setBeers(beers);
      };
      getBeers();
    }, []);
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Punk Beers&lt;/h1&gt;
        &lt;Beer beer={beers} /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>I expect there to be a rendered list of H1 elements but this produces an endless loop of renders.</p>