7

Why doesn't the state change on first click?

const [building, setBuilding] = useState(0);
<Button 
     title="tester"
          onPress={() => {
            setBuilding(1);
            console.log(Building);
          }}/>

The console log always returns "0" on first click, instead of expected "1". How do I fix this?

4
  • 4
    State updates are asynchronous. Commented Apr 16, 2021 at 17:11
  • 1
    like Dave Newton said, the state update won't be immediately reflected within the on Press function. If you want to see state updating console log inside of a useEffect Commented Apr 16, 2021 at 17:12
  • Also, see this, this, this, this, this. Commented Apr 16, 2021 at 17:14
  • that answers the question thank you. Does one normally close questions or leave them up for others? I feel my question is far easier to understand than the links it shows me. Commented Apr 16, 2021 at 17:53

1 Answer 1

14

as state updates are async, you may see your state value updating by adding building to a useEffect dependency, thus causing it to fire whenever the value of building changes.

const [building, setBuilding] = useState(0);

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

  return (
    <button
      title="tester"
      onClick={() => {
        setBuilding(1);
      }}
    >
      test
    </button>
  );
Sign up to request clarification or add additional context in comments.

6 Comments

I see. Then technically I need to setBuilding(1) inside the useEffect to "actually" change it. Is that right?
I only ask because the goal is to actually change it on first click not just see the console log change. depending on where i put it. Would your solution change Building on first click?
no, the on click handler does the state update. the only reason it is not readily available in your on press function is due to the fact that setting state is async. if you are displaying building value in jsx you will see its value update correctly. The only reason for the useEffect is if you needed to do something to the building value before rendering it
attached is a code sandbox to show you what I mean codesandbox.io/s/mystifying-wind-qt18k?file=/src/App.js:0-388
so in lamens terms, the useEffect will just get the "0" out of the way on load so when I click it the button the first time it does show the correct number.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.