Why function has to be called twice to update hook state?

Question

I'm trying to implement the following yes/no buttons:

import React, { useState } from "react";

const YesNoComponentFunctional = () => {
  const [button, setButton] = useState("");

  const onYesPress = () => {
    setButton("Yes");
    console.log({ button });
  };

  const onNoPress = () => {
    setButton("No");
    console.log({ button });
  };

  return (
    <div>
      <button onClick={() => onYesPress()}>Yes</button>
      <button onClick={() => onNoPress()}>No</button>
     </div>
  );
};
export default YesNoComponentFunctional;

Wich I got from this article here.

And I can't understand why I have to click the buttons twice to properly display the message to console. Why is that happening?

Setting state in react isn't a synchronous task, your `console.log` is probably being called before the state has actually changed. — DBS, Jan 14 '20 at 11:59
Because `setButton` runs asynchronously. The value of `button` is actually updated after the the line `console.log` — Loi Nguyen Huynh, Jan 14 '20 at 12:01
https://github.com/bilalsha/react-guide Take a look at it it is also using hooks — Bilal Shah, Jan 14 '20 at 12:05

score 3 · Answer 1 · answered Jan 14 '20 at 12:00

3

setButton is async method, your button state won't update immediately. you can use useEffect hook to check if button's values is updated or not.

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

answered Jan 14 '20 at 12:00

Amit Chauhan

6,151
2
24
37

why isn't this being told in tutorial? I think there must be a way without useEffect – Bilal Shah Jan 14 '20 at 12:03
If it's async, shouldn't I be able to solve that by awaiting it? – Rogerio Schmitt Jan 14 '20 at 12:04
This is one way to verify if your state has been updated or not. Anyway you don't need to use useEffect after every setState. – Amit Chauhan Jan 14 '20 at 12:05
@RogerioSchmitt it's async in the sense state doesn't update right away, but react doesn't return promise so you can't use await. – Amit Chauhan Jan 14 '20 at 12:06

score 1 · Answer 2 · answered Jan 14 '20 at 12:01

1

The set function(setButton for this example) is asynchronous. In order to get the exact result, you need to use useEffect.

import React, { useState, useEffect } from "react";

const YesNoComponentFunctional = () => {
  const [button, setButton] = useState("");

  const onYesPress = () => {
    setButton("Yes");
  };

  const onNoPress = () => {
    setButton("No");
  };
  
  useEffect(() => {
    console.log({button})
  }, [button])

  return (
    <div>
      <button onClick={() => onYesPress()}>Yes</button>
      <button onClick={() => onNoPress()}>No</button>
     </div>
  );
};
export default YesNoComponentFunctional;

answered Jan 14 '20 at 12:01

TopW3

1,477
1
8
14

If it's async, shouldn't I be able to solve that by awaiting it? – Rogerio Schmitt Jan 14 '20 at 12:04
'asynchronous' doesn't mean awaitable. For example, 'asynchronous' means that the function isn't blocked until the function is completed. We can take fs.readFile function as an asynchronous function example. – TopW3 Jan 14 '20 at 12:08

Why function has to be called twice to update hook state?

2 Answers2