title: useState inside of useEffect not reflecting a change immediately
body: <p>I did some research and I've learned that useState is asynchronous, although, I'm still not sure how to fix my particular issue. I need to fetch the data from an api, and the state only updates the second render, plus I need to get only 1 file, so just adding current new state to the previous one is probably not an option.</p>
  <p>(the result is that it now says .map is not a function since useState is empty)</p>
  <pre class="lang-js prettyprint-override"><code>useEffect(() =&gt; {
    axios.get(`http://localhost:8080/files/public/${id}`)
      .then(res =&gt; {
        console.log(res.data);
        setFile(res.data);
      })
  }, []);
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>{
    file.map((row, index) =&gt; {
      return &lt;li&gt;{index}&lt;/li&gt;
    })
  }
  </code></pre>
  
  <p>Edit: useState is actually initialized <code>const [file, setFile] = useState([]);</code></p>