score:3

Accepted answer

but I see no mention that different setState's may execute out of order

Correct they are run in order, and from a UX perspective you don't want to show a loading indicator for less than half a second.

The case for needing this looks more like this:

this.setState({
    isLoading: true,
    results: this.state.results || []
}, function() {
    $.get(ajaxUrl, function(results) {
        this.setState({
            isLoading: false,
            // note! we're referring to state here
            results: this.state.results.concat(results)
        });
    }.bind(this));
}.bind(this));

However, this can also be solved by passing a callback to setState instead of the object. This way, we get to look at state after any previous queued updates have occurred.

It's also possible to pass a function with the signature function(state, props). This can be useful in some cases when you want to enqueue an atomic update that consults the previous value of state+props before setting any values.
Component Api Docs

this.setState({
    isLoading: true,
    results: null
});
$.get(ajaxUrl, function(results) {
    this.setState(function(state){
        return {
            isLoading: false,
            results: state.results.concat(results)
        };
    });
}.bind(this));

For best results, abstract all of this into a high order component or mixin. You don't want to deal with this logic in every component that's fetching data.


Related Query

More Query from same tag