title: Question about queueing state changes with hooks on React
body: <p>So, I've started studying React by doing class components. There, as far as I understood what I was doing, if I had a</p>
  <pre><code>this.state = {
    isLoading: false,
    dataToRender: [],
  }
  
  this.setState({ isLoading: true }, async () =&gt; {
   const data = await fetchData();
   this.setState({ dataToRender: data , isLoading: false });
  })
  
  const message =&gt; &lt;p&gt;loading...&lt;/p&gt;
  
  if (isLoading) return message();
  
  return (
   dataToRender.map
  )
  
  </code></pre>
  <p>for displaying a &quot;loading&quot; message whenever I call an API for new data, I could know that the setState &quot;queue&quot; would be executed in an order.
  The outer setState would receive a first state change on the first parameter and a function to execute right after it as the second parameter.</p>
  <p>The problem is that I'm having a bit of difficulty wrapping my head around ways to achieve this with hooks. I'm assuming doing</p>
  <pre><code>const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  
  setLoading(async () =&gt; {
    setLoading(true)
    const data = await fetchData()
    setData(data);
    return false;
  })
  
  </code></pre>
  <p>wouldn't work, right? I feel like the overall logic of building this kind of component logic may be different when using hooks somehow... If anyone could at least point me to concept direction it would be nice.
  Thanks! :)</p>