How to change useState variable in the same function

Question

I have this variable:

const [userName, setUserName] = useState<string>("initialValue");

With a button click I execute this function:

const FacebookSign = () => {
    console.log(userName);
    setUserName("value2");
    console.log(userName);
}

The userName variable doesn't change and my output is:

initialValue
initialValue

But if I hit the button the second time, I got the output:

value2
value2

Why doesn't the value change the first time?

Include your button and onClick code and the code where your FacebookSign function is defined. — Cully, May 24 '20 at 03:23
this may be a duplicate of [another question](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — richytong, May 24 '20 at 03:33

score 1 · Accepted Answer · answered May 24 '20 at 03:25

1

If you read about how the state change mechanism works. The process is asynchronous in nature. So may or may not change immediately. Read more about it here Is useState synchronous?

Also you can use useEffect() hook to see the state change immediately.

answered May 24 '20 at 03:25

Harmandeep Singh Kalsi

3,315
2
14
26

score 1 · Answer 2 · answered May 24 '20 at 03:56

1

When you call setSate, the state is not updated immediately. The state will be updated after a re-render. You can use useEffect to check the most updated state.

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

answered May 24 '20 at 03:56

Tony Nguyen

3,298
11
19

How to change useState variable in the same function

2 Answers2