React hooks useState not updating the state

user_8547535 0
Viewed 3427

I have the following code in the component: I am not able to get an updated state.

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.

But I can see updated state in react dev tools

The code I am using :

function UserComponent() {
    const [users, setUsers] = useState<any>([])


  const register = () => {
    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) => {
    let userList: any = []
    usernameList.forEach((user: any) => {
      userList.push({'uri': user['@_uri'], 'name': user['@_uri'].substr(10, 8)})
    })

    // here I can see updated userList
    console.log(userList)
    setUsers(userList)
    setTimeout(() => {

      // users is empty here
      console.log(users)
    }, 5000)
  }

  return (
    <UserList users={users}/>
  )

}

function UserList({users}) {
    return (
        <div>
            {users.map((user) => <h2>user</h2>)}
        </div>
    )
}
use-state typescript reactjs javascript
3 Answers

You can use useEffect for that and pass the state as dependency, so every time users state get change it would get invoke.

useEffect(() => {
    console.log(users);
    }, [users])
user_105994630

useEffect should serve your purpose.

useEffect(() => {
console.log(users)
  
},[users]);

The above function (in this case, its console logging "users") is executed only when its (users) state is changed or updated. Consider replacing the setTimeOut with useEffect instead.

user_128285660

Use useEffect hook:

useEffect(() => console.log(users), [users])

Full code:

function UserComponent() {
  const [users, setUsers] = useState<any>([])

  useEffect(() => console.log(users), [users])


  const register = () => {
    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) => {
    let userList: any = []
    usernameList.forEach((user: any) => {
      userList.push({'uri': user['@_uri'], 'name': user['@_uri'].substr(10, 8)})
    })

    // here I can see updated userList
    console.log(userList)
    setUsers(userList)
  }

  return (
    <UserList users={users}/>
  )
user_104278070
Related