no-did-mount-set-state is triggered by setState in ES6 arrow functions

[jbaiter]

This code triggers the no-did-mount-set-state rule:

React.createClass({
  //...
  componentDidMount() {
    someClass.onSomeEvent((data) => this.setState({data: data});
  }
  //...
}

The error is triggered both when I use an expression and a statement body after the arrow (i.e. with curly braces).
This shouldn't trigger the rule, since the callbacks are obviously not invoked during componentDidMount but only at a later time.

[yannickcr]

I'm afraid we cannot detect that the callback is not immediately invoked during componentDidMount.

In this case I suggest you to rewrite your code not to have setState in componentDidMount
or simply ignore the warning for this line:

/*eslint-disable react/no-did-mount-set-state */
someClass.onSomeEvent((data) => this.setState({data: data}));
/*eslint-enable react/no-did-mount-set-state */

or

someClass.onSomeEvent((data) => this.setState({data: data})); // eslint-disable-line react/no-did-mount-set-state

Sorry for not having a better solution there :|

[ide]

Would it be possible to make this option configurable ex: strict (false positives) and loose mode (false negatives)? componentDidMount is a common place to set up event handlers so some kind of lenient loose mode could be helpful.

[yannickcr]

Do you have an idea of the logic followed by the rule in strict and loose modes ?

Currently the rule is very simple: if it find a this.setState(...) in componentDidMount or componentDidUpdate it trigger an error.

[ide]

My thinking is that strict mode would use the current behavior, and loose mode would suppress the warning if this.setState is called within a function.

[yannickcr]

Good idea, it should do the trick.

I will work on this.

[ide]

@yannickcr Thanks =)

[silvenon]

Awesome, thanks so much for this!