Adjusted no-unsafe rule

Author: sergei-startsev

docs/rules/no-unsafe.md

@@ -1,7 +1,8 @@
 # Prevent usage of `UNSAFE_` methods (react/no-unsafe)
 
-Certain legacy lifecycle methods are unsafe for use in async React applications and cause warnings in [_strict mode_][strict_mode]. These also happen to be the lifecycles that cause the most [confusion within the React community][component_lifecycle_changes].
+Certain legacy lifecycle methods are [unsafe for use in async React applications][async_rendering] and cause warnings in [_strict mode_][strict_mode]. These also happen to be the lifecycles that cause the most [confusion within the React community][component_lifecycle_changes].
 
+[async_rendering]: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
 [strict_mode]: https://reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles
 [component_lifecycle_changes]: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes
 

lib/rules/no-unsafe.js

@@ -8,6 +8,7 @@
 const Components = require('../util/Components');
 const astUtil = require('../util/ast');
 const docsUrl = require('../util/docsUrl');
+const versionUtil = require('../util/version');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -44,7 +45,8 @@ module.exports = {
      */
     function isUnsafe(method) {
       const unsafeMethods = getUnsafeMethods();
-      return unsafeMethods.indexOf(method) !== -1;
+      const isApplicable = versionUtil.testReactVersion(context, '16.3.0');
+      return unsafeMethods.indexOf(method) !== -1 && isApplicable;
     }
 
     /**
@@ -59,7 +61,7 @@ module.exports = {
 
       context.report({
         node: node,
-        message: `Do not use ${method}`
+        message: `${method} is unsafe for use in async rendering, see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html`
       });
     }
 

tests/lib/rules/no-unsafe.js

@@ -19,6 +19,10 @@ const parserOptions = {
   }
 };
 
+function errorMessage(method) {
+  return `${method} is unsafe for use in async rendering, see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html`;
+}
+
 // ------------------------------------------------------------------------------
 // Tests
 // ------------------------------------------------------------------------------
@@ -32,15 +36,17 @@ ruleTester.run('no-unsafe', rule, {
           componentDidUpdate() {}
           render() {}
         }
-      `
+      `,
+      settings: {react: {version: '16.4.0'}}
     },
     {
       code: `
         const Foo = createReactClass({
           componentDidUpdate: function() {},
           render: function() {}
         });
-      `
+      `,
+      settings: {react: {version: '16.4.0'}}
     },
     {
       code: `
@@ -49,7 +55,8 @@ ruleTester.run('no-unsafe', rule, {
           UNSAFE_componentWillReceiveProps() {}
           UNSAFE_componentWillUpdate() {}
         }
-      `
+      `,
+      settings: {react: {version: '16.4.0'}}
     },
     {
       code: `
@@ -58,7 +65,28 @@ ruleTester.run('no-unsafe', rule, {
           UNSAFE_componentWillReceiveProps: function() {},
           UNSAFE_componentWillUpdate: function() {},
         });
-      `
+      `,
+      settings: {react: {version: '16.4.0'}}
+    },
+    {
+      code: `
+        class Foo extends React.Component {
+          UNSAFE_componentWillMount() {}
+          UNSAFE_componentWillReceiveProps() {}
+          UNSAFE_componentWillUpdate() {}
+        }
+      `,
+      settings: {react: {version: '16.2.0'}}
+    },
+    {
+      code: `
+          const Foo = createReactClass({
+            UNSAFE_componentWillMount: function() {},
+            UNSAFE_componentWillReceiveProps: function() {},
+            UNSAFE_componentWillUpdate: function() {},
+          });
+        `,
+      settings: {react: {version: '16.2.0'}}
     }
   ],
 
@@ -71,15 +99,28 @@ ruleTester.run('no-unsafe', rule, {
         UNSAFE_componentWillUpdate() {}
       }
     `,
+      settings: {react: {version: '16.3.0'}},
       errors: [
         {
-          message: 'Do not use UNSAFE_componentWillMount'
+          message: errorMessage('UNSAFE_componentWillMount'),
+          line: 2,
+          column: 7,
+          endLine: 6,
+          endColumn: 8
         },
         {
-          message: 'Do not use UNSAFE_componentWillReceiveProps'
+          message: errorMessage('UNSAFE_componentWillReceiveProps'),
+          line: 2,
+          column: 7,
+          endLine: 6,
+          endColumn: 8
         },
         {
-          message: 'Do not use UNSAFE_componentWillUpdate'
+          message: errorMessage('UNSAFE_componentWillUpdate'),
+          line: 2,
+          column: 7,
+          endLine: 6,
+          endColumn: 8
         }
       ]
     },
@@ -91,15 +132,20 @@ ruleTester.run('no-unsafe', rule, {
           UNSAFE_componentWillUpdate: function() {},
         });
       `,
+      settings: {react: {version: '16.3.0'}},
       errors: [
         {
-          message: 'Do not use UNSAFE_componentWillMount'
+          message: errorMessage('UNSAFE_componentWillMount'),
+          line: 2,
+          column: 38,
+          endLine: 6,
+          endColumn: 10
         },
         {
-          message: 'Do not use UNSAFE_componentWillReceiveProps'
+          message: errorMessage('UNSAFE_componentWillReceiveProps')
         },
         {
-          message: 'Do not use UNSAFE_componentWillUpdate'
+          message: errorMessage('UNSAFE_componentWillUpdate')
         }
       ]
     }