Calculator state not updating until next click

JavaScript
1

my state only updates after the 2nd click?

2

I’m not really sure what you mean by that.

I think what you might mean is that when you set the state in your myInput method, the console.log statements that follow do not reflect the change in state.

This is a common confusion that people have. setState is asynchronous - you do not know when it is going to happen. It will always happen very quickly, but the code that runs following it may/will run before it gets updated. Because of this, setState accepts a callback as the second parameter.

console.log(this.state);
// { foo: 'bar' }

this.setState({ foo: 'baz' });
console.log(this.state);
// { foo: 'bar' } - wtf?!? oh, yeah, it hasn't been updated yet

this.setState(
  { foo: 'qux' },
  () => console.log(this.state);
);
// { foo: 'qux' } - this worked as expected

Does that makes sense?

2 Likes
3

Ah!! , thank you, That is exactly what i meant… okay, when testing should i put that info in a separate dive in the render method?

4

I’m not sure what you mean by “dive”.

I’m saying that this:

        this.setState({
          numbers: y,
          sign: '',
          curNum: 0,
        })
    //testing
    console.log('case x === 1 || x === =',"-","myAudio = ", myAudio,"-",'x =', x,"-", 'numbers= ', this.state.numbers,"-", 'sign= ',  this.state.sign,"-", 'curNum= ',  this.state.curNum)
    //testing

needs to be this:

        this.setState(
          {
            numbers: y,
            sign: '',
            curNum: 0,
          },
          () => console.log('case x === 1 || x === =',"-","myAudio = ", myAudio,"-",'x =', x,"-", 'numbers= ', this.state.numbers,"-", 'sign= ',  this.state.sign,"-", 'curNum= ',  this.state.curNum)
         )

if you want to see the change immediately.

5

Thanks Kevin… for the record i meant to type “div” … that appears to be what i need. Just so i have a more complete understanding. Can you explain why making it a function (?) works on an asynchronous … eh… thing?

6

Making it a function doesn’t do anything.

What happened was that in the primordial ooze, when the React Gods where designing setState, they realized that the asynchronous nature of it could cause problems. What if the developer wants to run something, but only after the update takes place. So what they decided was that we could pass in a function as a second parameter, a callback function. When the asynchronous operation of updating state is done, that function will be “called back”, or run. So, React cannot guarantee when setState will be done (even though it is very fast), they will guarantee that that callback function will wait until it is done.

To be honest, I don’t end up using that callback much, except if I need to log something out when I’m developing.

Does that all makes sense?

1 Like
7

perfectly! A callback waits for the update before running. GOT IT! That was awesome! thanks man!

1 Like
8

Yes. It is a common pattern for callbacks to asynchronous functions. This used to be very common for things like fetching data, etc - before things like Promises and async/await filled the need. There are also callback functions for things that are synchronous functions, like prototype methods.

9

durp!.. that was my brain at the edge of breaking LMAO! I’m getting it… this is FUN! i love puzzles… learning this skill is the ultimate puzzle.

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.