[fix] require-optimization: fix when using arrow function in class components

Author: jenil94

lib/rules/require-optimization.js

@@ -166,6 +166,10 @@ module.exports = {
 
     return {
       ArrowFunctionExpression(node) {
+        // Skip if the function is declared in the class
+        if (isFunctionInClass()) {
+          return;
+        }
         // Stateless Functional Components cannot be optimized (yet)
         markSCUAsDeclared(node);
       },

tests/lib/rules/require-optimization.js

@@ -118,6 +118,23 @@ ruleTester.run('react-require-optimization', rule, {
     code: `
       const obj = { prop: [,,,,,] }
     `
+  }, {
+    code: `
+      import React from "react";
+      class YourComponent extends React.Component {
+        handleClick = () => {}
+        shouldComponentUpdate(){
+          return true;
+        }
+        render() {
+          return <div onClick={this.handleClick}>123</div>
+        }
+      }
+    `,
+    parser: parsers.BABEL_ESLINT,
+    errors: [{
+      message: MESSAGE
+    }]
   }],
 
   invalid: [{
@@ -142,6 +159,20 @@ ruleTester.run('react-require-optimization', rule, {
     errors: [{
       message: MESSAGE
     }]
+  }, {
+    code: `
+      import React from "react";
+      class YourComponent extends React.Component {
+        handleClick = () => {}
+        render() {
+          return <div onClick={this.handleClick}>123</div>
+        }
+      }
+    `,
+    parser: parsers.BABEL_ESLINT,
+    errors: [{
+      message: MESSAGE
+    }]
   }, {
     code: `
       import React, {Component} from "react";