CODEWITHSUNDEEP
javascriptreactjsreact-native
Shashank Rao M
Shashank Rao M

Reputation: 13

Return to caller function only after setState is complete

I am new to reactjs. I want the function to return only after setState has occurred. My code looks something like this

state={
  a: false,
  b: false
}

function1 = () =>{
  this.setState({a: true});
  //do something over here to wait until setState finishes
  //and then return to caller function
}

function2 = () =>{
    this.setState({b: true});
   //do something over here to wait until setState finishes
   //and then return to caller function
}


function3 = () =>{
  function1();
  function2();
  if(this.state.a && this.state.b === true){
      //perform something
  }
}

If I call function3() on click of a button, I am not getting the desired output as the state of a and b is not changing to true. How do I //perform something after the state has updated?

Thanks in advance.

Upvotes: 1

Views: 248

Answers (4)

Sagi Rika
Sagi Rika

Reputation: 2979

If I understand correctly, you want to execute both function1 and function2 and then perform the check. Since setState is asynchronous, you can use the callback option to resolve a promise on each function, and then on function3 wait for both promises to resolve, and then perform your check.

Please see this example:

state={
  a: false,
  b: false
}

function1 = () => {
  return new Promise((resolve, reject) => {
    this.setState({a: true}, () => resolve());
    //do something over here to wait until setState finishes
    //and then return to caller function
  }
}

function2 = () => {
  return new Promise((resolve, reject) => {
    this.setState({b: true}, () => resolve());
    //do something over here to wait until setState finishes
    //and then return to caller function
  }
}


function3 = () =>{
  Promise.all([function1(), function2()]).then(() => {
    if(this.state.a && this.state.b === true){
      //perform something
    }
  });
}

Hope it helps!

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58593

setState callback function is what you needed here :

As per your code, I would suggest this

state={
  a: false,
  b: false
}

function1 = () =>{
    this.setState({a: true},() => {
        //when setState finishes
        this.checkState();
    });
}

function2 = () =>{
    this.setState({b: true},() => {
        //when setState finishes
        this.checkState();
    });
}


function3 = () =>{
    function1();
    function2();
}

checkState() {
    if(this.state.a && this.state.b === true){
        //perform something
    }
}

Upvotes: 0

Ishmael Sibisi
Ishmael Sibisi

Reputation: 69

Not sure if I am understanding your issue but setState() takes a callback function that if called after that state has been updated so for your example, you can simplify it like this:

state = {
  a: false,
  b: false
}

function1 = () => {
  this.setState({a: true}, this.function3);
}

function2 = () => {
    this.setState({b: true}, this.function3);
}


function3 = () => {
  if(this.state.a && this.state.b === true){
      //perform something
  }
}

Check out this example on using a setState callback.

Upvotes: 0

Waheed Akhtar
Waheed Akhtar

Reputation: 3187

Setting State in React is an Async operation and you have to handle is asynchronously, So if you wanted to do something that executes after setState has occurred, you have to do this inside the callback function.

 state={
  a: false,
  b: false
}

function1 = () =>{
  this.setState({a: true}, this.function3);
}

function2 = () =>{
    this.setState({b: true}, function3);
}


function3 = () =>{
  if(this.state.a && this.state.b === true){
      // Do what you want 
  }
}

Upvotes: 0

Related Questions