diff --git a/README.md b/README.md index 161c75663b..1b0964eb74 100644 --- a/README.md +++ b/README.md @@ -102,7 +102,7 @@ Enable the rules that you would like to use. * [react/no-children-prop](docs/rules/no-children-prop.md): Prevent passing children as props * [react/no-danger](docs/rules/no-danger.md): Prevent usage of dangerous JSX properties * [react/no-danger-with-children](docs/rules/no-danger-with-children.md): Prevent problem with children and props.dangerouslySetInnerHTML -* [react/no-deprecated](docs/rules/no-deprecated.md): Prevent usage of deprecated methods, including component lifecyle methods +* [react/no-deprecated](docs/rules/no-deprecated.md): Prevent usage of deprecated methods * [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of `setState` in `componentDidMount` * [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of `setState` in `componentDidUpdate` * [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md): Prevent direct mutation of `this.state` diff --git a/docs/rules/no-deprecated.md b/docs/rules/no-deprecated.md index 63076fed6e..77cf0ff7bb 100644 --- a/docs/rules/no-deprecated.md +++ b/docs/rules/no-deprecated.md @@ -27,27 +27,6 @@ const propTypes = { React.DOM.div(); import React, { PropTypes } from 'react'; - -class Foo extends React.Component { - componentWillMount() { } - componentWillReceiveProps() { } - componentWillUpdate() { } - // ... -} - -class Foo extends React.PureComponent { - componentWillMount() { } - componentWillReceiveProps() { } - componentWillUpdate() { } - // ... -} - -var Foo = createReactClass({ - componentWillMount: function() {}, - componentWillReceiveProps: function() {}, - componentWillUpdate: function() {}, - // ... -}) ``` The following patterns are **not** considered warnings: @@ -59,10 +38,4 @@ ReactDOM.render(, root); ReactDOM.findDOMNode(this.refs.foo); import { PropTypes } from 'prop-types'; - -class Foo { - componentWillMount() { } - componentWillReceiveProps() { } - componentWillUpdate() { } -} ``` diff --git a/lib/rules/no-deprecated.js b/lib/rules/no-deprecated.js index f5499deb7b..401c8df5aa 100644 --- a/lib/rules/no-deprecated.js +++ b/lib/rules/no-deprecated.js @@ -76,21 +76,27 @@ module.exports = { deprecated[`${pragma}.PropTypes`] = ['15.5.0', 'the npm module prop-types']; // 15.6.0 deprecated[`${pragma}.DOM`] = ['15.6.0', 'the npm module react-dom-factories']; - // 16.3.0 + // 16.999.0 + // For now the following life-cycle methods are just legacy, not deprecated: + // `componentWillMount`, `componentWillReceiveProps`, `componentWillUpdate` + // https://github.com/yannickcr/eslint-plugin-react/pull/1750#issuecomment-425975934 deprecated.componentWillMount = [ - '16.3.0', + '16.999.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ]; deprecated.componentWillReceiveProps = [ - '16.3.0', + '16.999.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ]; deprecated.componentWillUpdate = [ - '16.3.0', + '16.999.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ]; return deprecated; } diff --git a/tests/lib/rules/no-deprecated.js b/tests/lib/rules/no-deprecated.js index 221b49bc01..81a8812e7c 100644 --- a/tests/lib/rules/no-deprecated.js +++ b/tests/lib/rules/no-deprecated.js @@ -91,7 +91,7 @@ ruleTester.run('no-deprecated', rule, { componentWillUpdate() {} } `, - settings: {react: {version: '16.2.0'}} + settings: {react: {version: '16.998.0'}} } ], @@ -219,8 +219,9 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.3.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 3, @@ -228,16 +229,18 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.3.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 4, column: 11 }, { - message: errorMessage('componentWillUpdate', '16.3.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 5, @@ -258,8 +261,9 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.3.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 4, @@ -267,16 +271,18 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.3.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 5, column: 13 }, { - message: errorMessage('componentWillUpdate', '16.3.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 6, @@ -295,8 +301,9 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.3.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 3, @@ -304,16 +311,18 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.3.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 4, column: 11 }, { - message: errorMessage('componentWillUpdate', '16.3.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 5, @@ -332,8 +341,9 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.3.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 3, @@ -341,16 +351,18 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.3.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 4, column: 11 }, { - message: errorMessage('componentWillUpdate', '16.3.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 5, @@ -369,8 +381,9 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.3.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 3, @@ -378,16 +391,18 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.3.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 4, column: 11 }, { - message: errorMessage('componentWillUpdate', '16.3.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 5, @@ -406,8 +421,9 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.3.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 3, @@ -415,16 +431,18 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.3.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 4, column: 11 }, { - message: errorMessage('componentWillUpdate', '16.3.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 5, @@ -444,8 +462,9 @@ ruleTester.run('no-deprecated', rule, { errors: [ { message: errorMessage( - 'componentWillMount', '16.3.0', 'UNSAFE_componentWillMount', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount' + 'componentWillMount', '16.999.0', 'UNSAFE_componentWillMount', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 4, @@ -453,16 +472,18 @@ ruleTester.run('no-deprecated', rule, { }, { message: errorMessage( - 'componentWillReceiveProps', '16.3.0', 'UNSAFE_componentWillReceiveProps', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops' + 'componentWillReceiveProps', '16.999.0', 'UNSAFE_componentWillReceiveProps', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 5, column: 11 }, { - message: errorMessage('componentWillUpdate', '16.3.0', 'UNSAFE_componentWillUpdate', - 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate' + message: errorMessage('componentWillUpdate', '16.999.0', 'UNSAFE_componentWillUpdate', + 'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. ' + + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.' ), type: 'Identifier', line: 6,