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' }]