setState callback in componentWillMount?

[matthewwithanm]

Calling setState in componentWillMount doesn't behave as I would expect. Here's a fiddle demonstrating. In short, the callback is invoked before the state has been updated.

[sophiebits]

In master the callback isn't called immediately but it looks like we have a bug where it's not called at all (which you can repro by using http://react.zpao.com/builds/master/latest/react-with-addons.js on JSFiddle).

[langpavel]

👻

[sbrandwoo]

It would appear that this is still a bug but it's behaviour has changed since the bug was opened.

In 0.10.0 the callback is called too soon, before the state has changed (http://jsbin.com/cuyadiqojumi/1/edit).
In 0.11.0 the callback is never called (http://jsbin.com/senasemurifa/1/edit).

[sbrandwoo]

In 0.12.1 this callback is never called (http://jsbin.com/pedexogoxe/1/edit?js,console,output)

[fredkelly]

Is there an interim solution to get the desired behaviour?

[bobiblazeski]

Any update on this still happening on 0.13.1 http://jsfiddle.net/28zsnwcb/2/

[ccorcos]

This is super annoying. I think this ought to work as well: http://jsfiddle.net/5L9u5oqz/1/

[jbpros]

Running into this problem as well.

[ccorcos]

Now I'm getting an issue where the callback isnt being called at all. Oy vey

http://codepen.io/ccorcos/pen/QbxaMg

[ccorcos]

@matthewwithanm Here's your same JSFiddle with an updated version of React and the callback never gets called! WTF!

http://jsfiddle.net/ccorcos/k5ws12c6/

P.S. Just noticed that other people have mentioned this as well

[brigand]

If you need something for now, you can use this function to patch it.

var Hello = React.createClass({
    getInitialState: function() { return {}; },
    componentWillMount: function() {
        hotfixSetState(this);
        this.setState({testing: '123'}, function() { ... });
    }
    // ...
});


function hotfixSetState(instance){
    var original = {
        componentWillMount: instance.componentWillMount,
        setState: instance.setState,
        componentDidMount: instance.componentDidMount
    };
    var traced = new Error();

    var callbacks = [];
    var isMounted = false;

    instance.setState = function(update){
        var callback = arguments[1];
        if (callback) {
            callbacks.push(callback);
        }

        // don't pass the callback
        original.setState.call(instance, update, function(){
            console.warn('you are using hotfixSetState, but the setState callback was called', traced, instance);
        });
    };

    instance.componentWillMount = function(){
        if (original.componentWillMount) {
            return original.componentWillMount.apply(this, arguments);
        }
    };

    instance.componentDidMount = function(){
        for (var i=0; i<callbacks.length; i++) {
            callbacks[i].call(undefined);
        }
        instance.setState = original.setState;

        if (original.componentDidMount) {
            return original.componentDidMount.apply(instance, arguments);
        }
    };
};

[ccorcos]

you da man!

[sophiebits]

#4171 should have fixed this. The callback fires on the client but not the server.

[gaearon]

If it is fixed, is this comment outdated?

react/src/renderers/shared/reconciler/ReactUpdateQueue.js

Lines 140 to 144 in 1e81561

	// TODO: The callback here is ignored when setState is called from
	// componentWillMount. Either fix it or disallow doing so completely in
	// favor of getInitialState. Alternatively, we can disallow
	// componentWillMount during server-side rendering.
	enqueueUpdate(internalInstance);

[LiuuY]

Recently I am reading the source code about batching, this comment really make me confused, until I find this issue, maybe you guys can delete it?

react/src/renderers/shared/reconciler/ReactUpdateQueue.js

Lines 140 to 144 in 1e81561

	// TODO: The callback here is ignored when setState is called from
	// componentWillMount. Either fix it or disallow doing so completely in
	// favor of getInitialState. Alternatively, we can disallow
	// componentWillMount during server-side rendering.
	enqueueUpdate(internalInstance);