16f6c0aecf
Inline adoc files when they are included exactly once. Also fix language tags because this inlining gives us better information on what language the code is written in.
60 lines
1.3 KiB
Plaintext
60 lines
1.3 KiB
Plaintext
== 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[]
|