Skip to content

Commit

Permalink
Add docs for no-direct-mutation-state
Browse files Browse the repository at this point in the history
  • Loading branch information
petersendidit committed Sep 21, 2015
1 parent 329c4c8 commit cf6e8fc
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 1 deletion.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ Finally, enable all of the rules that you would like to use.
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-direct-mutation-state": 1,
"react/no-multi-comp": 1,
"react/no-set-state": 1,
"react/no-unknown-property": 1,
Expand Down Expand Up @@ -94,6 +95,7 @@ Finally, enable all of the rules that you would like to use.
* [no-danger](docs/rules/no-danger.md): Prevent usage of dangerous JSX properties
* [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of `setState` in `componentDidMount`
* [no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of `setState` in `componentDidUpdate`
* [no-direct-mutation-state](docs/rules/no-direct-mutation-state.md): Prevent direct mutation of `this.state`
* [no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file
* [no-set-state](docs/rules/no-set-state.md): Prevent usage of `setState`
* [no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property
Expand Down
37 changes: 37 additions & 0 deletions docs/rules/no-direct-mutation-state.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
# Prevent direct mutation of this.state (no-direct-mutation-state)

NEVER mutate `this.state` directly, as calling `setState()` afterwards may replace
the mutation you made. Treat `this.state` as if it were immutable.

## Rule Details

This rule is aimed to forbid the use of mutating `this.state` directly.

The following patterns are considered warnings:

```js
var Hello = React.createClass({
componentDidMount: function() {
this.state.name = this.props.name.toUpperCase();
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});
```


The following patterns are not considered warnings:

```js
var Hello = React.createClass({
componentDidMount: function() {
this.setState({
name: this.props.name.toUpperCase();
});
},
render: function() {
return <div>Hello {this.state.name}</div>;
}
});
```
6 changes: 5 additions & 1 deletion lib/rules/no-direct-mutation-state.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,11 @@ module.exports = function(context) {
return {

AssignmentExpression: function(node) {
var item = node.left.object;
var item;
if (!node.left || !node.left.object || !node.left.object.object) {
return;
}
item = node.left.object;
while (item.object.property) {
item = item.object;
}
Expand Down
8 changes: 8 additions & 0 deletions tests/lib/rules/no-direct-mutation-state.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,14 @@ ruleTester.run('no-direct-mutation-state', rule, {
ecmaFeatures: {
jsx: true
}
}, {
code: [
'var Hello = "foo";',
'module.exports = {};'
].join('\n'),
ecmaFeatures: {
jsx: true
}
}],

invalid: [{
Expand Down

0 comments on commit cf6e8fc

Please sign in to comment.