title: React state not updating using hooks
body: <p>I have the following code in the component:
  I am not able to get an updated state.</p>
  <p>When I call createUserList I can see the users in UserList component but in UserComponet when I log users I can not see users there.</p>
  <p>The code I am using :</p>
  <pre><code>function UserComponent() {
      const [users, setUsers] = useState&lt;any&gt;([])
  
  
    const register = () =&gt; {
      userAgent.delegate = {
        onMessage(message: Message) {
          let usernameList = message.event.entry
          if (message.event['@_category'] === 'activate') {
            createUserList(usernameList); 
          } else if (message.event['@_category'] === 'de-activate') {
            
            // empty user list but I can see users in react dev tools
            console.log(users)
            const username = message.event.entry
            removeUser(username)
          }
        }
      }
    }
  
    const createUserList = (usernameList: any) =&gt; {
      let userList: any = []
      usernameList.forEach((user: any) =&gt; {
        userList.push({'uri': user['@_uri'], 'name': user['@_uri'].substr(10, 8)})
      })
  
      // here I can see updated userList
      console.log(userList)
      setUsers(userList)
      setTimeout(() =&gt; {
  
        // users is empty here
        console.log(users)
      }, 5000)
    }
  
    return (
      &lt;UserList users={users}/&gt;
    )
  
  }
  
  function UserList({users}) {
      return (
          &lt;div&gt;
              {users.map((user) =&gt; &lt;h2&gt;user&lt;/h2&gt;)}
          &lt;/div&gt;
      )
  }
  </code></pre>