Unable to set state value using useState in react

Question

When I submit the info, the console.log gives me back a user.user.uid value. But when setting the value to a variable using useState, it sets the value as null and passes null value to userInfo function. userInfo is also an async function. Why is that?

  const handleSubmit = async (e, email, password) => {
    e.preventDefault();
    try {
      const user = await createUserWithEmailAndPassword(auth, email, password);
      console.log(user.user.uid);
      await setUserId(user.user.uid);
    } catch (e) {
      console.log(e);
    }
    await userInfo(email, password, userId);
  };

state updates are async, the value after setting state is not available yet but after a re-render ... — KcH, Oct 28 '22 at 06:51
@KcH When I call setUserId, doesn't it trigger a re-render thereby setting the state value since I have used await? — vinDev, Oct 28 '22 at 06:55
@Alien13 useEffect runs when auth state is changed, ie when a user is created and an id is set. — vinDev, Oct 28 '22 at 06:58
@vinDev await has no effect with setState, its async nature not the wait the promises are .. — KcH, Oct 28 '22 at 06:58
Ah that explains it, as the first comment stated: state updates are async. — Alien13, Oct 28 '22 at 07:00

score 1 · Answer 1 · answered Oct 28 '22 at 06:55

1

If your setUserId state setter is not a promise (https://stackoverflow.com/a/58326822/15814542), you cannot await it.

This causes await userInfo(..., userId) to run with userId set to null.

You could

let userId = ...;
try{userId = ...}
await userInfo (email, password, userId);
setUserId(userId)

answered Oct 28 '22 at 06:55

m4china

230
3
9

This works. But I would like to know if there is a way by setting the state. – vinDev Oct 28 '22 at 07:03

score 0 · Answer 2 · answered Oct 28 '22 at 07:03

As the state updates are maybe async you could do it as

const handleSubmit = async (e, email, password) => {
  e.preventDefault();
  try {
    const user = await createUserWithEmailAndPassword(auth, email, password);
    setUserId(user.user.uid);
    await userInfo(email, password, user.user.uid); // pass uid directly as so
  } catch (e) {
    console.log(e);
  }
};

If the result is not being used from userInfo using await is not required too ...

Unable to set state value using useState in react

2 Answers2