ReactJS - waiting for multiple setState to complete before executing next code

Question

I am working with ReactJS, and ran into a problem. I used setState multiple times after getting my response.data from axios in order to set all the neccessary data into my state. However, the issue is that I want to wait for all the setStates to finish before moving on to the next line of code. I am not sure how to do that, as I know that the setState takes in a second callback function, but thats only for a single setState. I tried looking into Promise but I am not sure how to implement that correctly.

Here is my code:

axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
    .then(response => {
        this.setState({ data: response.data });
        let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
        let rangeEnd = response.data[response.data.length - 1].date
        this.setState({ start: rangeStart })
        this.setState({ end: rangeEnd })
        // execute next line of code here only after all setState above are finished
    })

All help is appreciated, thanks all!

You need to execute another lines when setState actually updates the state, this is what you need? — Mohit, Jun 09 '20 at 15:04

score 3 · Accepted Answer · answered Jun 09 '20 at 15:03

3

you can set multiple things at the same time like so:

this.setState({ start: rangeStart, end: rangeEnd })

you can also use a callback within setState to do something after the state has been set

this.setState({
    start: rangeStart, 
},() => {
    console.log('you can do something else here after you set state');
});

answered Jun 09 '20 at 15:03

Red Baron

7,181
10
39
86

1

i'll go try it out, thanks! I did not know that I am able to update multiple keys in state at once – jason Jun 09 '20 at 15:11
no worries. can you accept my answer tomorrow please as I have received the reputation limit for today :/ thanks @jason :) – Red Baron Jun 09 '20 at 15:15
no problem! i'll remember to accept it tomorrow :-) but my timezone is gmt +0800 so does it affect whether your tomorrow and my tomorrow is different? – jason Jun 09 '20 at 15:17
haha I'm not sure. I will ping you tomorrow to be sure. thanks! have a great day :) – Red Baron Jun 09 '20 at 15:18
@jason hey mate, feel free to mark it as correct any time from now. thanks :) – Red Baron Jun 10 '20 at 06:10

score 0 · Answer 2 · answered Jun 09 '20 at 15:05

the setState method takes a second argument, which is a callback that will be executed once state is updated.

axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
    .then(response => {

        let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
        let rangeEnd = response.data[response.data.length - 1].date
         // also you should combine state updates together
         this.setState({ data: response.data, start: rangeStart, end: rangeEnd  }, () => console.log('state was updated'));

        // execute next line of code here only after all setState above are finished
    })

oh I am able to update multiple keys of data within the state in one setState call? okay i'll go try it out, thanks! — jason, Jun 09 '20 at 15:10

score -1 · Answer 3 · answered Jun 09 '20 at 15:07

try this one it might help you

axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
    .then(response => {
        this.setState({ data: response.data });
        let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
        let rangeEnd = response.data[response.data.length - 1].date
        this.setState({ start: rangeStart })
        this.setState({ end: rangeEnd })
        return response
    }).then((response)=>{
// execute next line of code here 
});

score -1 · Answer 4 · answered Jun 09 '20 at 15:08

-1

I would tend to lean towards a different paradigm than relying on the setState callback as mentioned by others, for the reasons outlined here - What is the advantage of using componentDidUpdate over the setState callback?

Using a more modern version of React, and using hooks, you can achieve a much more 'reactive' programming styling using useEffect to react to state updates.

answered Jun 09 '20 at 15:08

andy mccullough

9,070
6
32
55

by this, you mean to use reactHooks' useEffect to detect changes in specific state objects, so as to carry out the neccessary code afterwards? In that case, is there a way for it to only run through once? Like only the first time those state objects above has updated, but afterwards, I would not want to run thru that useEffect anymore, is there a way to do so? – jason Jun 09 '20 at 15:16
no an effect will happen every time the dependency is updated. What is it you're need to do after the state is updated the first time but not subsequent changes to state? – andy mccullough Jun 09 '20 at 15:33

ReactJS - waiting for multiple setState to complete before executing next code

4 Answers4