ReactJS - Need to click twice to set State and run function

Question

Here is a summary of the code I have inside my React component:

getInitialState: function(){
  return{link:""}
},
onClick1: function(){
   this.setState({link:"Link1"});
   this.otherFunction();
},
onClick2: function(){
   this.setState({link:"Link2"});
   this.otherFunction();
},
otherFunction:function(){
     //API call to this.state.link
},
render: function(){
  return <div>
  <button1 onClick={this.onClick1}>Link1</button>
  <button2 onClick={this.onClick2}>Link2</button>
  //...some code to display the results of API call
  </div>
  }

The problem I have is that the first time I click the button, the otherFunction will run, but it will not have the updated value of myState. If I click a second time, then it works correctly.

setState is triggering the render; what is otherFunction and what state is it supposed to be updating? — Josh David Miller
– Josh David Miller, Commented Jan 14, 2016 at 22:22
there is another state for the API data. That is what the function is updating. I did not include it here because I didn't think it was related. — Marie Pelletier
– Marie Pelletier, Commented Jan 14, 2016 at 23:29

Community · Accepted Answer · 2020-06-20 09:12:55Z

12

From the docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

If you want a function to execute after the state transition completes, pass it in as a callback:

onClick1: function() {
   this.setState({link:"Link1"}, this.otherFunction);
},

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 14, 2016 at 22:33

Michael Parker

13k7 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marie Pelletier Over a year ago

thanks for the explanation. Unfortunately, putting the function as a callback does not work. EDIT: I have seen some examples and it sounds like it should work. Not sure why mine isn't. I will look it over again.

Josh David Miller Over a year ago

Somewhat unrelated, otherFunction might be unbound; this might be better: this.SetState(/*...*/, () => this.otherFunction() ).

Marie Pelletier · Accepted Answer · 2016-01-15 01:49:55Z

2

Well, here I am answering my own question, for future reference. I figured it out. I removed this.otherFunction() from the onClick functions, and put it in componentWillUpdate. So it looks like this:

getInitialState: function(){
  return{link:""}
},
onClick1: function(){
   this.setState({link:"Link1"});
},
onClick2: function(){
   this.setState({link:"Link2"});
},
otherFunction:function(){
     //API call to this.state.link
},
componentWillUpdate(){
    this.otherFunction();
},
render: function(){
  return <div>
  <button1 onClick={this.onClick1}>Link1</button>
  <button2 onClick={this.onClick2}>Link2</button>
  //...some code to display the results of API call
  </div>
  }

answered Jan 15, 2016 at 1:49

Marie Pelletier

4272 gold badges4 silver badges16 bronze badges

Comments

Batte Man · Accepted Answer · 2017-08-07 13:30:57Z

1

If all that onClick does is change the state, then you shouldn't have two functions that do the same job. You should have the new value of the "link" state passed as an argument to the function "onClick" :)

answered Aug 7, 2017 at 13:30

Batte Man

636 bronze badges

Collectives™ on Stack Overflow

ReactJS - Need to click twice to set State and run function

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related