diff --git a/docs/rules/no-did-mount-set-state.md b/docs/rules/no-did-mount-set-state.md
index 29e5d89352..7af9e6320e 100644
--- a/docs/rules/no-did-mount-set-state.md
+++ b/docs/rules/no-did-mount-set-state.md
@@ -4,7 +4,7 @@ Updating the state after a component mount will trigger a second `render()` call
## Rule Details
-This rule is aimed to forbid the use of `this.setState` in `componentDidMount`.
+This rule is aimed to forbid the use of `this.setState` in `componentDidMount` outside of functions, such as callbacks.
The following patterns are considered warnings:
@@ -21,6 +21,8 @@ var Hello = React.createClass({
});
```
+The following patterns are not considered warnings:
+
```js
var Hello = React.createClass({
componentDidMount: function() {
@@ -36,8 +38,6 @@ var Hello = React.createClass({
});
```
-The following patterns are not considered warnings:
-
```js
var Hello = React.createClass({
componentDidMount: function() {
@@ -57,9 +57,9 @@ var Hello = React.createClass({
...
```
-### `allow-in-func` mode
+### `disallow-in-func` mode
-By default this rule forbids any call to `this.setState` in `componentDidMount`. But since `componentDidMount` is a common place to set some event listeners, you may end up with calls to `this.setState` in some callbacks. The `allow-in-func` mode allows you to use `this.setState` in `componentDidMount` as long as they are called within a function.
+By default this rule forbids any call to `this.setState` in `componentDidMount` outside of functions. The `disallow-in-func` mode makes this rule more strict by disallowing calls to `this.setState` even within functions.
The following patterns are considered warnings:
@@ -76,8 +76,6 @@ var Hello = React.createClass({
});
```
-The following patterns are not considered warnings:
-
```js
var Hello = React.createClass({
componentDidMount: function() {
diff --git a/docs/rules/no-did-update-set-state.md b/docs/rules/no-did-update-set-state.md
index 0271f2b400..83aacc3b0f 100644
--- a/docs/rules/no-did-update-set-state.md
+++ b/docs/rules/no-did-update-set-state.md
@@ -32,6 +32,21 @@ var Hello = React.createClass({
});
```
+```js
+var Hello = React.createClass({
+ componentDidUpdate: function() {
+ this.onUpdate(function callback(newName) {
+ this.setState({
+ name: newName
+ });
+ });
+ },
+ render: function() {
+ return
Hello {this.props.name}
;
+ }
+});
+```
+
## Rule Options
```js
@@ -42,7 +57,7 @@ var Hello = React.createClass({
### `allow-in-func` mode
-By default this rule forbids any call to `this.setState` in `componentDidUpdate`. But in certain cases you may need to perform asynchronous calls in `componentDidUpdate` that may end up with calls to `this.setState`. The `allow-in-func` mode allows you to use `this.setState` in `componentDidUpdate` as long as they are called within a function.
+By default this rule forbids any call to `this.setState` in `componentDidUpdate` outside of functions. The `disallow-in-func` mode makes this rule more strict by disallowing calls to `this.setState` even within functions.
The following patterns are considered warnings:
@@ -59,8 +74,6 @@ var Hello = React.createClass({
});
```
-The following patterns are not considered warnings:
-
```js
var Hello = React.createClass({
componentDidUpdate: function() {
diff --git a/lib/rules/no-did-mount-set-state.js b/lib/rules/no-did-mount-set-state.js
index a190b84f71..157f38900a 100644
--- a/lib/rules/no-did-mount-set-state.js
+++ b/lib/rules/no-did-mount-set-state.js
@@ -10,7 +10,7 @@
module.exports = function(context) {
- var mode = context.options[0] || 'never';
+ var mode = context.options[0] || 'allow-in-func';
// --------------------------------------------------------------------------
// Public
@@ -36,7 +36,7 @@ module.exports = function(context) {
if (
(ancestors[i].type !== 'Property' && ancestors[i].type !== 'MethodDefinition') ||
ancestors[i].key.name !== 'componentDidMount' ||
- (mode === 'allow-in-func' && depth > 1)
+ (mode !== 'disallow-in-func' && depth > 1)
) {
continue;
}
@@ -52,5 +52,5 @@ module.exports = function(context) {
};
module.exports.schema = [{
- enum: ['allow-in-func']
+ enum: ['disallow-in-func']
}];
diff --git a/lib/rules/no-did-update-set-state.js b/lib/rules/no-did-update-set-state.js
index 39ada395ad..2a2937f92b 100644
--- a/lib/rules/no-did-update-set-state.js
+++ b/lib/rules/no-did-update-set-state.js
@@ -10,7 +10,7 @@
module.exports = function(context) {
- var mode = context.options[0] || 'never';
+ var mode = context.options[0] || 'allow-in-func';
// --------------------------------------------------------------------------
// Public
@@ -36,7 +36,7 @@ module.exports = function(context) {
if (
(ancestors[i].type !== 'Property' && ancestors[i].type !== 'MethodDefinition') ||
ancestors[i].key.name !== 'componentDidUpdate' ||
- (mode === 'allow-in-func' && depth > 1)
+ (mode !== 'disallow-in-func' && depth > 1)
) {
continue;
}
@@ -52,5 +52,5 @@ module.exports = function(context) {
};
module.exports.schema = [{
- enum: ['allow-in-func']
+ enum: ['disallow-in-func']
}];
diff --git a/tests/lib/rules/no-did-mount-set-state.js b/tests/lib/rules/no-did-mount-set-state.js
index 10f26c801b..0011171aff 100644
--- a/tests/lib/rules/no-did-mount-set-state.js
+++ b/tests/lib/rules/no-did-mount-set-state.js
@@ -65,7 +65,6 @@ ruleTester.run('no-did-mount-set-state', rule, {
' }',
'});'
].join('\n'),
- options: ['allow-in-func'],
parserOptions: parserOptions
}, {
code: [
@@ -81,7 +80,6 @@ ruleTester.run('no-did-mount-set-state', rule, {
'});'
].join('\n'),
parser: 'babel-eslint',
- options: ['allow-in-func'],
parserOptions: parserOptions
}],
@@ -123,7 +121,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
' }',
'});'
].join('\n'),
- options: ['allow-in-func'],
+ options: ['disallow-in-func'],
parserOptions: parserOptions,
errors: [{
message: 'Do not use setState in componentDidMount'
@@ -139,7 +137,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
'}'
].join('\n'),
parser: 'babel-eslint',
- options: ['allow-in-func'],
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidMount'
}]
@@ -156,6 +154,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
'});'
].join('\n'),
parserOptions: parserOptions,
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidMount'
}]
@@ -172,6 +171,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
'}'
].join('\n'),
parser: 'babel-eslint',
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidMount'
}]
@@ -217,6 +217,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
].join('\n'),
parser: 'babel-eslint',
parserOptions: parserOptions,
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidMount'
}]
@@ -229,6 +230,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
'}'
].join('\n'),
parser: 'babel-eslint',
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidMount'
}]
diff --git a/tests/lib/rules/no-did-update-set-state.js b/tests/lib/rules/no-did-update-set-state.js
index 6e4349b75b..4345bd54f5 100644
--- a/tests/lib/rules/no-did-update-set-state.js
+++ b/tests/lib/rules/no-did-update-set-state.js
@@ -65,7 +65,6 @@ ruleTester.run('no-did-update-set-state', rule, {
' }',
'});'
].join('\n'),
- options: ['allow-in-func'],
parserOptions: parserOptions
}, {
code: [
@@ -81,7 +80,6 @@ ruleTester.run('no-did-update-set-state', rule, {
'});'
].join('\n'),
parser: 'babel-eslint',
- options: ['allow-in-func'],
parserOptions: parserOptions
}],
@@ -123,7 +121,7 @@ ruleTester.run('no-did-update-set-state', rule, {
' }',
'});'
].join('\n'),
- options: ['allow-in-func'],
+ options: ['disallow-in-func'],
parserOptions: parserOptions,
errors: [{
message: 'Do not use setState in componentDidUpdate'
@@ -139,7 +137,7 @@ ruleTester.run('no-did-update-set-state', rule, {
'}'
].join('\n'),
parser: 'babel-eslint',
- options: ['allow-in-func'],
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidUpdate'
}]
@@ -156,6 +154,7 @@ ruleTester.run('no-did-update-set-state', rule, {
'});'
].join('\n'),
parserOptions: parserOptions,
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidUpdate'
}]
@@ -172,6 +171,7 @@ ruleTester.run('no-did-update-set-state', rule, {
'}'
].join('\n'),
parser: 'babel-eslint',
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidUpdate'
}]
@@ -217,6 +217,7 @@ ruleTester.run('no-did-update-set-state', rule, {
].join('\n'),
parser: 'babel-eslint',
parserOptions: parserOptions,
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidUpdate'
}]
@@ -229,6 +230,7 @@ ruleTester.run('no-did-update-set-state', rule, {
'}'
].join('\n'),
parser: 'babel-eslint',
+ options: ['disallow-in-func'],
errors: [{
message: 'Do not use setState in componentDidUpdate'
}]