Skip to content

Commit 376dc53

Browse files
lencioniyannickcr
lencioni
authored and
yannickcr
committed
Enable allow-in-func mode by default in no-did-mount-set-state and no-did-update-set-state rules (fixes jsx-eslint#686)
1 parent 2105cbc commit 376dc53

6 files changed

+39
-24
lines changed

‎docs/rules/no-did-mount-set-state.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Updating the state after a component mount will trigger a second `render()` call
44

55
## Rule Details
66

7-
This rule is aimed to forbid the use of `this.setState` in `componentDidMount`.
7+
This rule is aimed to forbid the use of `this.setState` in `componentDidMount` outside of functions, such as callbacks.
88

99
The following patterns are considered warnings:
1010

@@ -21,6 +21,8 @@ var Hello = React.createClass({
2121
});
2222
```
2323

24+
The following patterns are not considered warnings:
25+
2426
```js
2527
var Hello = React.createClass({
2628
componentDidMount: function() {
@@ -36,8 +38,6 @@ var Hello = React.createClass({
3638
});
3739
```
3840

39-
The following patterns are not considered warnings:
40-
4141
```js
4242
var Hello = React.createClass({
4343
componentDidMount: function() {
@@ -57,9 +57,9 @@ var Hello = React.createClass({
5757
...
5858
```
5959

60-
### `allow-in-func` mode
60+
### `disallow-in-func` mode
6161

62-
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.
62+
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.
6363

6464
The following patterns are considered warnings:
6565

@@ -76,8 +76,6 @@ var Hello = React.createClass({
7676
});
7777
```
7878

79-
The following patterns are not considered warnings:
80-
8179
```js
8280
var Hello = React.createClass({
8381
componentDidMount: function() {

‎docs/rules/no-did-update-set-state.md

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,21 @@ var Hello = React.createClass({
3232
});
3333
```
3434

35+
```js
36+
var Hello = React.createClass({
37+
componentDidUpdate: function() {
38+
this.onUpdate(function callback(newName) {
39+
this.setState({
40+
name: newName
41+
});
42+
});
43+
},
44+
render: function() {
45+
return <div>Hello {this.props.name}</div>;
46+
}
47+
});
48+
```
49+
3550
## Rule Options
3651

3752
```js
@@ -42,7 +57,7 @@ var Hello = React.createClass({
4257

4358
### `allow-in-func` mode
4459

45-
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.
60+
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.
4661

4762
The following patterns are considered warnings:
4863

@@ -59,8 +74,6 @@ var Hello = React.createClass({
5974
});
6075
```
6176

62-
The following patterns are not considered warnings:
63-
6477
```js
6578
var Hello = React.createClass({
6679
componentDidUpdate: function() {

‎lib/rules/no-did-mount-set-state.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
module.exports = function(context) {
1212

13-
var mode = context.options[0] || 'never';
13+
var mode = context.options[0] || 'allow-in-func';
1414

1515
// --------------------------------------------------------------------------
1616
// Public
@@ -36,7 +36,7 @@ module.exports = function(context) {
3636
if (
3737
(ancestors[i].type !== 'Property' && ancestors[i].type !== 'MethodDefinition') ||
3838
ancestors[i].key.name !== 'componentDidMount' ||
39-
(mode === 'allow-in-func' && depth > 1)
39+
(mode !== 'disallow-in-func' && depth > 1)
4040
) {
4141
continue;
4242
}
@@ -52,5 +52,5 @@ module.exports = function(context) {
5252
};
5353

5454
module.exports.schema = [{
55-
enum: ['allow-in-func']
55+
enum: ['disallow-in-func']
5656
}];

‎lib/rules/no-did-update-set-state.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
module.exports = function(context) {
1212

13-
var mode = context.options[0] || 'never';
13+
var mode = context.options[0] || 'allow-in-func';
1414

1515
// --------------------------------------------------------------------------
1616
// Public
@@ -36,7 +36,7 @@ module.exports = function(context) {
3636
if (
3737
(ancestors[i].type !== 'Property' && ancestors[i].type !== 'MethodDefinition') ||
3838
ancestors[i].key.name !== 'componentDidUpdate' ||
39-
(mode === 'allow-in-func' && depth > 1)
39+
(mode !== 'disallow-in-func' && depth > 1)
4040
) {
4141
continue;
4242
}
@@ -52,5 +52,5 @@ module.exports = function(context) {
5252
};
5353

5454
module.exports.schema = [{
55-
enum: ['allow-in-func']
55+
enum: ['disallow-in-func']
5656
}];

‎tests/lib/rules/no-did-mount-set-state.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ ruleTester.run('no-did-mount-set-state', rule, {
6565
' }',
6666
'});'
6767
].join('\n'),
68-
options: ['allow-in-func'],
6968
parserOptions: parserOptions
7069
}, {
7170
code: [
@@ -81,7 +80,6 @@ ruleTester.run('no-did-mount-set-state', rule, {
8180
'});'
8281
].join('\n'),
8382
parser: 'babel-eslint',
84-
options: ['allow-in-func'],
8583
parserOptions: parserOptions
8684
}],
8785

@@ -123,7 +121,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
123121
' }',
124122
'});'
125123
].join('\n'),
126-
options: ['allow-in-func'],
124+
options: ['disallow-in-func'],
127125
parserOptions: parserOptions,
128126
errors: [{
129127
message: 'Do not use setState in componentDidMount'
@@ -139,7 +137,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
139137
'}'
140138
].join('\n'),
141139
parser: 'babel-eslint',
142-
options: ['allow-in-func'],
140+
options: ['disallow-in-func'],
143141
errors: [{
144142
message: 'Do not use setState in componentDidMount'
145143
}]
@@ -156,6 +154,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
156154
'});'
157155
].join('\n'),
158156
parserOptions: parserOptions,
157+
options: ['disallow-in-func'],
159158
errors: [{
160159
message: 'Do not use setState in componentDidMount'
161160
}]
@@ -172,6 +171,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
172171
'}'
173172
].join('\n'),
174173
parser: 'babel-eslint',
174+
options: ['disallow-in-func'],
175175
errors: [{
176176
message: 'Do not use setState in componentDidMount'
177177
}]
@@ -217,6 +217,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
217217
].join('\n'),
218218
parser: 'babel-eslint',
219219
parserOptions: parserOptions,
220+
options: ['disallow-in-func'],
220221
errors: [{
221222
message: 'Do not use setState in componentDidMount'
222223
}]
@@ -229,6 +230,7 @@ ruleTester.run('no-did-mount-set-state', rule, {
229230
'}'
230231
].join('\n'),
231232
parser: 'babel-eslint',
233+
options: ['disallow-in-func'],
232234
errors: [{
233235
message: 'Do not use setState in componentDidMount'
234236
}]

‎tests/lib/rules/no-did-update-set-state.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ ruleTester.run('no-did-update-set-state', rule, {
6565
' }',
6666
'});'
6767
].join('\n'),
68-
options: ['allow-in-func'],
6968
parserOptions: parserOptions
7069
}, {
7170
code: [
@@ -81,7 +80,6 @@ ruleTester.run('no-did-update-set-state', rule, {
8180
'});'
8281
].join('\n'),
8382
parser: 'babel-eslint',
84-
options: ['allow-in-func'],
8583
parserOptions: parserOptions
8684
}],
8785

@@ -123,7 +121,7 @@ ruleTester.run('no-did-update-set-state', rule, {
123121
' }',
124122
'});'
125123
].join('\n'),
126-
options: ['allow-in-func'],
124+
options: ['disallow-in-func'],
127125
parserOptions: parserOptions,
128126
errors: [{
129127
message: 'Do not use setState in componentDidUpdate'
@@ -139,7 +137,7 @@ ruleTester.run('no-did-update-set-state', rule, {
139137
'}'
140138
].join('\n'),
141139
parser: 'babel-eslint',
142-
options: ['allow-in-func'],
140+
options: ['disallow-in-func'],
143141
errors: [{
144142
message: 'Do not use setState in componentDidUpdate'
145143
}]
@@ -156,6 +154,7 @@ ruleTester.run('no-did-update-set-state', rule, {
156154
'});'
157155
].join('\n'),
158156
parserOptions: parserOptions,
157+
options: ['disallow-in-func'],
159158
errors: [{
160159
message: 'Do not use setState in componentDidUpdate'
161160
}]
@@ -172,6 +171,7 @@ ruleTester.run('no-did-update-set-state', rule, {
172171
'}'
173172
].join('\n'),
174173
parser: 'babel-eslint',
174+
options: ['disallow-in-func'],
175175
errors: [{
176176
message: 'Do not use setState in componentDidUpdate'
177177
}]
@@ -217,6 +217,7 @@ ruleTester.run('no-did-update-set-state', rule, {
217217
].join('\n'),
218218
parser: 'babel-eslint',
219219
parserOptions: parserOptions,
220+
options: ['disallow-in-func'],
220221
errors: [{
221222
message: 'Do not use setState in componentDidUpdate'
222223
}]
@@ -229,6 +230,7 @@ ruleTester.run('no-did-update-set-state', rule, {
229230
'}'
230231
].join('\n'),
231232
parser: 'babel-eslint',
233+
options: ['disallow-in-func'],
232234
errors: [{
233235
message: 'Do not use setState in componentDidUpdate'
234236
}]

0 commit comments

Comments
 (0)