title: setState in nested async function - React Hooks
body: <p>How can I build a function which gets some data asynchronously then uses that data to get more asynchronous data?</p>
  
  <p>I am using Dexie.js (indexedDB wrapper) to store data about a direct message. One thing I store in the object is the user id which I'm going to be sending messages to. To build a better UI I'm also getting some information about that user such as the profile picture, username, and display name which is stored on a remote rdbms. To build a complete link component in need data from both databases (local indexedDB and remote rdbms).</p>
  
  <p>My solution returns an empty array. It is being computed when logging it in Google Chrome and I do see my data. However because this is not being computed at render time the array is always empty and therefor I can't iterate over it to build a component.</p>
  
  <pre class="lang-js prettyprint-override"><code>const [conversations, setConversations] = useState&lt;IConversation[]&gt;()
  const [receivers, setReceivers] = useState&lt;Profile[]&gt;()
  useEffect(() =&gt; {
      messagesDatabase.conversations.toArray().then(result =&gt; {
        setConversations(result)
      })
    }, [])
  
    useEffect(() =&gt; {
      if (conversations) {
        const getReceivers = async () =&gt; {
          let receivers: Profile[] = []
          await conversations.forEach(async (element) =&gt; {
            const receiver = await getProfileById(element.conversationWith, token)
            // the above await is a javascript fetch call to my backend that returns json about the user values I mentioned
            receivers.push(receiver)
          })
          return receivers
        }
        getReceivers().then(receivers =&gt; {
          setReceivers(receivers)
        })
      }
    }, [conversations])
    /*
      The below log logs an array with a length of 0; receivers.length -&gt; 0
      but when clicking the log in Chrome I see:
      [
       0: {
         avatarURL: "https://lh3.googleusercontent.com/..."
         displayName: "Cool guy"
         userId: "1234"
         username: "cool_guy"
       }
       1: ...
      ]
  
    */
    console.log(receivers) 
  </code></pre>
  
  <p>My plan is to then iterate over this array using map</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    receivers &amp;&amp; conversations
    ? receivers.map((element, index) =&gt; {
      return  &lt;ChatLink 
                path={conversations[index].path}
                lastMessage={conversations[index].last_message}
                displayName={element.displayName}
                username={element.username}
                avatarURL={element.avatarURL}
                key={index}
              /&gt;
      })
    : null
  }
  </code></pre>
  
  <p>How can I write this to not return a empty array?<br>
  Here's a SO question related to what I'm experiencing <a href="https://stackoverflow.com/questions/42260524/array-length-is-zero-but-the-array-has-elements-in-it">here</a></p>