rspec/rules/S4439/javascript/rule.adoc

== Why is this an issue?

``++isMounted()++`` is generally used before calling ``++setState++`` to avoid changing the state on an already unmounted component. A user should never be able to do an action on an unmount component unless the component is having a bug in its unmount phase.

This rule raises an issue on each use of ``++isMounted()++``.


``++isMounted()++`` is not longer available in ES6. Use of ``++isMounted()++`` must be avoided to ease the upgrade to ES6.


=== Noncompliant code example

[source,javascript]
----
if (this.isMounted()) { // Noncompliant
  this.setState({...});
}
----


=== Compliant solution

[source,javascript]
----
class MyComponent extends React.Component {

  _isMounted = false;

  componentDidMount() {
    _isMounted = true;
    ...
    if (_isMounted) {
       this.setState({...});
     }
  }
  render() {
    ...
  }
  componentWillUnmount() {
    _isMounted = false;
  }
}
----


== Resources

* https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html[React.js blog] - isMounted is an Antipattern


ifdef::env-github,rspecator-view[]
'''
== Comments And Links
(visible only on this page)

=== on 23 Feb 2018, 11:46:16 Alexandre Gigleux wrote:
Covered by ESLint for React: \https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/no-is-mounted.md (react/no-is-mounted)

endif::env-github,rspecator-view[]