Skip to content

Commit cf6e8fc

Browse files
committed
Add docs for no-direct-mutation-state
1 parent 329c4c8 commit cf6e8fc

File tree

4 files changed

+52
-1
lines changed

4 files changed

+52
-1
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ Finally, enable all of the rules that you would like to use.
6262
"react/no-danger": 1,
6363
"react/no-did-mount-set-state": 1,
6464
"react/no-did-update-set-state": 1,
65+
"react/no-direct-mutation-state": 1,
6566
"react/no-multi-comp": 1,
6667
"react/no-set-state": 1,
6768
"react/no-unknown-property": 1,
@@ -94,6 +95,7 @@ Finally, enable all of the rules that you would like to use.
9495
* [no-danger](docs/rules/no-danger.md): Prevent usage of dangerous JSX properties
9596
* [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of `setState` in `componentDidMount`
9697
* [no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of `setState` in `componentDidUpdate`
98+
* [no-direct-mutation-state](docs/rules/no-direct-mutation-state.md): Prevent direct mutation of `this.state`
9799
* [no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file
98100
* [no-set-state](docs/rules/no-set-state.md): Prevent usage of `setState`
99101
* [no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Prevent direct mutation of this.state (no-direct-mutation-state)
2+
3+
NEVER mutate `this.state` directly, as calling `setState()` afterwards may replace
4+
the mutation you made. Treat `this.state` as if it were immutable.
5+
6+
## Rule Details
7+
8+
This rule is aimed to forbid the use of mutating `this.state` directly.
9+
10+
The following patterns are considered warnings:
11+
12+
```js
13+
var Hello = React.createClass({
14+
componentDidMount: function() {
15+
this.state.name = this.props.name.toUpperCase();
16+
},
17+
render: function() {
18+
return <div>Hello {this.state.name}</div>;
19+
}
20+
});
21+
```
22+
23+
24+
The following patterns are not considered warnings:
25+
26+
```js
27+
var Hello = React.createClass({
28+
componentDidMount: function() {
29+
this.setState({
30+
name: this.props.name.toUpperCase();
31+
});
32+
},
33+
render: function() {
34+
return <div>Hello {this.state.name}</div>;
35+
}
36+
});
37+
```

lib/rules/no-direct-mutation-state.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ module.exports = function(context) {
1717
return {
1818

1919
AssignmentExpression: function(node) {
20-
var item = node.left.object;
20+
var item;
21+
if (!node.left || !node.left.object || !node.left.object.object) {
22+
return;
23+
}
24+
item = node.left.object;
2125
while (item.object.property) {
2226
item = item.object;
2327
}

tests/lib/rules/no-direct-mutation-state.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ ruleTester.run('no-direct-mutation-state', rule, {
4444
ecmaFeatures: {
4545
jsx: true
4646
}
47+
}, {
48+
code: [
49+
'var Hello = "foo";',
50+
'module.exports = {};'
51+
].join('\n'),
52+
ecmaFeatures: {
53+
jsx: true
54+
}
4755
}],
4856

4957
invalid: [{

0 commit comments

Comments
 (0)