score:1

Accepted answer

the reason you are not getting the value on state because when the usestate is initialized, user doesn't has a value, it's still loading. since state is initialized only once, when the data from firebase loads, state doesn't changes.
you need to use a useeffect hook to watch for change in user, and setusername then.

const [user, loading, error] = usedocument(
  firebase.firestore().collection("users").doc(uid),
  {
    snapshotlistenoptions: { includemetadatachanges: true },
  }
);

const [username, setusername] = usestate('');

useeffect(() => {
  if (user) {
    setusername(user.data().username);
  }
}, [user])

return (
  <div classname="flex">
    <div classname="w-1/2">
      {user && (
        <div classname="p-8">
          <div>{user.data().username}</div>
          <div>{username}</div>
        </div>
      )}
    </div>
    <div classname="w-1/2">box 2</div>
  </div>
);

this should work, if you face any issues, leave a comment.


Related Query

More Query from same tag