Why no setState in componentDidMount?

[SimenB]

This is less of an issue and more of a question on how you handle things.

React docs says to put ajax-requests in componentDidMount. But I would also like to cancel the request in componentWillUnmount as that data is not needed if the component isn't there. And to do so, I need a reference to the promise created in componentDidMount. I thought to achieve this by putting it on state, like so:

componentDidMount() {
  this.setState({ serverRequest: this.props.fetcData() });
}

componentWillUnmount() {
  const { serverRequest } = this.state;

  if (serverRequest.isPending()) serverRequest.cancel();
}

(This is using bluebird btw, not native promises)

And this works, but the linter complains about the setState-call in componentDidMount.

I tracked down the issue where the rule was added (#345 & #346), and while the OP states that it follows your style guide, I can't find any reference to that rule in your docs.

So, my question is: Do you have any other way of keeping around references to async stuff created in componentDidMount such as ajax-requests, setTimeouts etc to be able to clean them up in componentWillUnmount? Or should I just disable the rule for that particular line?

[ljharb]

Why not put the setState call in componentWillMount? That would be the inverse of componentWillUnmount

[SimenB]

As the docs state that they belong in componentDidMount:

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

[ljharb]

Touché :-) according to https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md, "Updating the state after a component mount will trigger a second render() call and can lead to property/layout thrashing."

However, since setState uses ===, i'm not sure if it's the best place to put a promise. What about an instance property?

[SimenB]

Just go this.serverRequest = ...?

[ljharb]

Sure. You'll want to make sure it's managed in the appropriate places, in case props change and whatnot, but otherwise that seems like it would be fine.

[SimenB]

Assigning to this works perfectly, and it is indeed buggy to use state. Thanks for the help!

[SimenB]

Ref facebook/react#5870

[ericgrosse]

@SimenB Can you elaborate on this.serverRequest = ...?

[SimenB]

@ericgrosse you can see the full example in the React docs: https://facebook.github.io/react/tips/initial-ajax.html
Anything beyond that?

I lost "this" inside of componentDidMount() where I ran a Stomp (ActiveMQ) topic listener.
Inside that listener "this" became undefined.
An uneducated trick that worked was to save "this" into a variable "thus" before entering that listener
and I could use it inside the message handler doing stuff such as "thus.forceUpdate()" and similar.

[ljharb]

@mobimation or you could use an arrow function, and just use this directly