Return to caller function only after setState is complete

Question

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.

Answer 1

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!

Answer 2

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.

Answer 3

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 
  }
}

Answer 4

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
    }
}