title: UseEffect is empty in the beginning
body: <p>I m traying to create a component using Hooks.
  Inside useEffect I call a function, but it dosen 't work. I think is because when the app starts the props is empty and in the second, when is full dosen 't call the function again..
  WHY I m doing wrong?
  Thanks (sorry for my bad english)</p>
  
  <p>this is the code:</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  
  const fetchContent = async content =&gt; {
    console.log(content) // is empty in the first console, and full in the second.
    const data = [];
  
    for await (const item of content) {
       data.push({ componentName: item.nombre});
    }
    return data;
  };
  
  function ContentGroups(props) {
    const [contentResult, setResult] = useState([]);
  
     useEffect(() =&gt; {
       fetchContent(props.info).then(data =&gt; setResult(data));
       console.log(contentResult) // is empty in the first console, and full in the second.
    }, []);
  
    return (
      &lt;React.Fragment&gt;
         {contentResult.map((el, index) =&gt; {
          switch (el.componentName) {
            case "top":
              return &lt;h1&gt;soy un top words&lt;/h1&gt;/*
          }
        })}
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>