[Perf] component detection: improve performance by avoiding traversing parents unnecessarily

Author: chiawendt

lib/util/Components.js

@@ -109,7 +109,7 @@ class Components {
   set(node, props) {
     const list = Lists.get(this);
     let component = list[getId(node)];
-    while (!component) {
+    while (!component || component.confidence < 1) {
       node = node.parent;
       if (!node) {
         return;
@@ -477,7 +477,6 @@ function componentRule(rule, context) {
       }
 
       if (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
-        const isMethod = parent.type === 'Property' && parent.method;
         const isPropertyAssignment = parent.type === 'AssignmentExpression'
           && parent.left.type === 'MemberExpression';
         const isModuleExportsAssignment = isPropertyAssignment
@@ -562,6 +561,22 @@ function componentRule(rule, context) {
           return undefined;
         }
 
+        // case: { f() { return ... } }
+        if (node.parent.type === 'Property' && node.parent.method && !node.parent.computed) {
+          if (!isFirstLetterCapitalized(node.parent.key.name)) {
+            return undefined;
+          }
+          return utils.isReturningJSX(node) ? node : undefined;
+        }
+
+        // case: { f: () => ... }
+        if (node.parent.type === 'Property' && !node.id && !node.parent.computed) {
+          if (!isFirstLetterCapitalized(node.parent.key.name)) {
+            return undefined;
+          }
+          return utils.isReturningJSX(node) ? node : undefined;
+        }
+
         // Case like `React.memo(() => <></>)` or `React.forwardRef(...)`
         const pragmaComponentWrapper = utils.getPragmaComponentWrapper(node);
         if (pragmaComponentWrapper && utils.isReturningJSXOrNull(node)) {
@@ -576,10 +591,6 @@ function componentRule(rule, context) {
           return undefined;
         }
 
-        if (isMethod && !isFirstLetterCapitalized(node.parent.key.name)) {
-          return utils.isReturningJSX(node) ? node : undefined;
-        }
-
         if (node.id) {
           return isFirstLetterCapitalized(node.id.name) ? node : undefined;
         }
@@ -853,13 +864,8 @@ function componentRule(rule, context) {
         return;
       }
 
-      const component = utils.getParentComponent();
-      if (
-        !component
-        || (component.parent && component.parent.type === 'JSXExpressionContainer')
-      ) {
-        // Ban the node if we cannot find a parent component
-        components.add(node, 0);
+      const component = utils.getStatelessComponent(node);
+      if (!component) {
         return;
       }
       components.add(component, 2);
@@ -871,7 +877,7 @@ function componentRule(rule, context) {
         return;
       }
 
-      node = utils.getParentComponent();
+      node = utils.getStatelessComponent(node);
       if (!node) {
         return;
       }
@@ -884,13 +890,8 @@ function componentRule(rule, context) {
         return;
       }
 
-      const component = utils.getParentComponent();
-      if (
-        !component
-        || (component.parent && component.parent.type === 'JSXExpressionContainer')
-      ) {
-        // Ban the node if we cannot find a parent component
-        components.add(node, 0);
+      const component = utils.getStatelessComponent(node);
+      if (!component) {
         return;
       }
       components.add(component, 2);

tests/lib/rules/destructuring-assignment.js

@@ -459,7 +459,7 @@ ruleTester.run('destructuring-assignment', rule, {
     },
     {
       code: `
-        var Hello = React.createClass({
+        var Hello = createReactClass({
           render: function() {
             return <Text>{this.props.foo}</Text>;
           }