Running React method after another

Question

I have a really simple React App, where you just click on the different color from the set and it re-renders to another color set. To load the game you press the button Pick color > Loads Color. I tried to create a Start Button that is just a method that calls Pick Color and Loads Color but I dont understand why it is not working properly. It seems like Loads Color runs before Pick Color finishes and that's why there is an error. If I do a setTimeout inside start for Loads Color, it will end up running correctly.

https://codepen.io/dnangels/pen/yLeVBZg

pickColorPair() {
        const randomNumber = Math.floor(Math.random() * 4);
        this.setState(() => ({ colorPair: this.colorSet[randomNumber] }));
        console.log(this.state.colorPair);
    }


    loadColor() {
        // console.log(this.state.colorPair);
        let colorArray = [this.state.colorPair[0]];

        for (let i = 1; i < this.state.size; i++) {
            colorArray.push(this.state.colorPair[1]);
        }
        this.randomize(colorArray);
        this.setState(() => ({ colors: colorArray }));
    }

Does anyone have a solution for this? How can I get Loads Color to run after Pick Color. Thanks!

if you need stuff to happen in an order then you should look into promises — Cyrus Zei
– Cyrus Zei, Commented Jun 16, 2020 at 22:25

Michael Peng · Accepted Answer · 2020-06-16 22:35:07Z

2

setState is asynchronous, if you need a function to execute right after setState(), you have to put it in the setState() callback, in your example, this might work.

pickColorPair() {
        const randomNumber = Math.floor(Math.random() * 4);
        this.setState(() => ({ colorPair: this.colorSet[randomNumber] }, this.loadColor));
        console.log(this.state.colorPair);
    }

answered Jun 16, 2020 at 22:35

Michael Peng

94611 silver badges13 bronze badges

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

Comments

Dylan Kerler · Accepted Answer · 2020-06-16 22:48:18Z

This is because setState works asynchronously.

To get this to work the way you intend you can use promises or callbacks - the convention nowadays is to use promises; However, setState uses callbacks because react was created before promises were the de-facto standard. Because of this, you'll need to integrate promises and callbacks together:

pickColorPair() {
    return new Promise(resolve => {
        const randomNumber = Math.floor(Math.random() * 4);
        this.setState(() => ({ 
            colorPair: this.colorSet[randomNumber] 
        }), resolve);
    });
}


loadColor() {
    return new Promise(resolve => {
        /** -- snip -- **/
        this.setState(() => ({ colors: colorArray }), resolve);
    });
}

setState takes a callback function that will be executed after the state has been updated. So after we update the state then we can resolve the promise by passing in resolve function as the callback.

Now our functions have promises we can use them synchronously. Your start function can now use the .then method to load the colours and then pick a colour pair only after the colours have been loaded:

start() {
  this.loadColors().then(this.pickColorPair);
}

You can read more about promises here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Collectives™ on Stack Overflow

Running React method after another

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related