If you do an asynchronous action that updates the state in ponentWillMount (like the docs say), but the ponent is unmounted (the user navigates away) before that async call is plete, you end up with the async callback trying to set the state on a now unmounted ponent, and an

"Invariant Violation: replaceState(...): Can only update a mounted or mounting ponent."

error.

What's the best way around this?

Thanks.

If you do an asynchronous action that updates the state in ponentWillMount (like the docs say), but the ponent is unmounted (the user navigates away) before that async call is plete, you end up with the async callback trying to set the state on a now unmounted ponent, and an

"Invariant Violation: replaceState(...): Can only update a mounted or mounting ponent."

error.

What's the best way around this?

Thanks.

• javascript
• asynchronous
• reactjs
• setstate

3 Answers 3

You can use ponent.isMounted method to check if ponent was actually attached to the DOM before replacing its state. Docs.

isMounted() returns true if the ponent is rendered into the DOM, false otherwise. You can use this method to guard asynchronous calls to setState() or forceUpdate().

UPD: Before you downvote. This answer was given 2 freaking years ago. And it was the way to do stuff back that days. If you are just starting to use React do not follow this answer. Use ponentDidMount or whatever another lifecycle hook you need.

isMounted() is actually an easy way to solve most problems, however, I don't think this is an ideal solution for concurrency issues.

Now imagine that the user clicks very fastly on many buttons, or maybe he has a very poor mobile connection. It may happen that finally 2 concurrent requests are pending, and on pletion will update the state.

If you fire request 1 and then request 2, then you would expect the result of request 2 to be added to your state.

Now imagine for some reason request 2 ends up before request 1, this will probably make your app unconsistent because it will show request2 results and then request 1, while your last "interest" was actually in request 1 answer.

To solve this kind of issue, you should rather use some kind of Compare And Swap algorithm. Basically, this means before issuing the request, you put some object node in state, and on request pletion, you pare with reference equality if the node to swap is still be node you are interested in when the request pletes.

Something like this:

var self = this;
var resultNode = {};
this.setState({result: resultNode});
this.getResult().then(function(someResult) {
    if ( self.state.result === resultNode ) {
        self.setState({result: someResult})
    }
}):

With something like that, you will not have concurrency issue in case the user clicks to fast on the buttons leading to current requests inside the same ponent.

update 2016

Don't start using isMounted because it will be removed from React, see the docs.

Probably the best solution for problems arising from async call from cmomponentWillMount is to move things to ponentDidMount.

More info about how to properly get around this problem and how not to need to use isMounted here: isMounted is an Antipattern