refactor: improve function component detection (#290)

Author: Rel1cx

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v0.10.4-beta.1 (Sat Jan 6 2024)
+
+### 🪄 Improvements
+
+- Improve function component detection in rule `react/no-unstable-nested-components` and `debug/function-component`.
+
 ## v0.10.4-beta.0 (Sat Jan 6 2024)
 
 ### 🪄 Improvements

packages/core/docs/README.md

@@ -379,13 +379,14 @@ ___
 
 ### hasNoneOrValidComponentName
 
-▸ **hasNoneOrValidComponentName**(`node`): `boolean`
+▸ **hasNoneOrValidComponentName**(`node`, `context`): `boolean`
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
 | `node` | `TSESTreeFunction` |
+| `context` | `Readonly`\<`RuleContext`\<`string`, readonly `unknown`[]\>\> |
 
 #### Returns
 
@@ -628,7 +629,7 @@ ___
 
 ### isComponentName
 
-▸ **isComponentName**(`name`): name is string
+▸ **isComponentName**(`name`): `boolean`
 
 #### Parameters
 
@@ -638,7 +639,7 @@ ___
 
 #### Returns
 
-name is string
+`boolean`
 
 ___
 

packages/core/src/component/component-collector.ts

@@ -118,8 +118,7 @@ export function useComponentCollector(
       if (O.isNone(maybeCurrentFn)) return;
       const [currentFn, isKnown, hookCalls] = maybeCurrentFn.value;
       if (isKnown) return;
-      const isComponent = F.constTrue()
-        && hasNoneOrValidComponentName(currentFn)
+      const isComponent = hasNoneOrValidComponentName(currentFn, context)
         && isJSXValue(node.argument, context, hint)
         && hasValidHierarchy(currentFn, context, hint);
       if (!isComponent) return;
@@ -152,7 +151,7 @@ export function useComponentCollector(
       const [currentFn, _, hookCalls] = maybeCurrentFn.value;
       const { body } = currentFn;
       const isComponent = F.constTrue()
-        && hasNoneOrValidComponentName(currentFn)
+        && hasNoneOrValidComponentName(currentFn, context)
         && isJSXValue(body, context, hint)
         && hasValidHierarchy(currentFn, context, hint);
       if (!isComponent) return;

packages/core/src/component/component-identifier.ts

@@ -1,33 +1,34 @@
-import { isOneOf, NodeType, type TSESTreeFunction } from "@eslint-react/ast";
+import { getFunctionIdentifier, NodeType, type TSESTreeFunction } from "@eslint-react/ast";
 import { O } from "@eslint-react/tools";
 import type { RuleContext } from "@eslint-react/types";
 import type { TSESTree } from "@typescript-eslint/types";
 
+import { isReactHookCallWithNameLoose } from "../hook";
 import { isForwardRefCall, isMemoCall } from "../react-api";
 
-function isMemoOrForwardRefCall(node: TSESTree.Node, context: RuleContext) {
+function isComponentWrapperCall(node: TSESTree.Node, context: RuleContext) {
   if (node.type !== NodeType.CallExpression) return false;
 
-  return isMemoCall(node, context) || isForwardRefCall(node, context);
+  return isMemoCall(node, context)
+    || isForwardRefCall(node, context)
+    || isReactHookCallWithNameLoose("useCallback")(node);
 }
 
 export function getFunctionComponentIdentifier(
   node: TSESTreeFunction,
   context: RuleContext,
 ): O.Option<TSESTree.Identifier | TSESTree.Identifier[]> {
-  const { id, parent } = node;
-  if (node.type === NodeType.FunctionDeclaration) return O.fromNullable(id);
-  if (
-    parent.type === NodeType.VariableDeclarator
-    && parent.id.type === NodeType.Identifier
-    && parent.parent.type === NodeType.VariableDeclaration
-  ) {
-    return O.some(parent.id);
+  const functionId = getFunctionIdentifier(node);
+
+  if (O.isSome(functionId)) {
+    return functionId;
   }
 
+  const { parent } = node;
+
   if (
     parent.type === NodeType.CallExpression
-    && isMemoOrForwardRefCall(parent, context)
+    && isComponentWrapperCall(parent, context)
     && parent.parent.type === NodeType.VariableDeclarator
     && parent.parent.id.type === NodeType.Identifier
     && parent.parent.parent.type === NodeType.VariableDeclaration
@@ -37,36 +38,15 @@ export function getFunctionComponentIdentifier(
 
   if (
     parent.type === NodeType.CallExpression
-    && isMemoOrForwardRefCall(parent, context)
+    && isComponentWrapperCall(parent, context)
     && parent.parent.type === NodeType.CallExpression
-    && isMemoOrForwardRefCall(parent.parent, context)
+    && isComponentWrapperCall(parent.parent, context)
     && parent.parent.parent.type === NodeType.VariableDeclarator
     && parent.parent.parent.id.type === NodeType.Identifier
     && parent.parent.parent.parent.type === NodeType.VariableDeclaration
   ) {
     return O.some(parent.parent.parent.id);
   }
 
-  if (
-    parent.type === NodeType.Property
-    && parent.key.type === NodeType.Identifier
-    && parent.parent.type === NodeType.ObjectExpression
-    && parent.parent.parent.type === NodeType.VariableDeclarator
-    && parent.parent.parent.id.type === NodeType.Identifier
-    && parent.parent.parent.parent.type === NodeType.VariableDeclaration
-  ) {
-    return O.some([parent.parent.parent.id, parent.key]);
-  }
-
-  if (
-    isOneOf([NodeType.MethodDefinition, NodeType.PropertyDefinition])(parent)
-    && parent.key.type === NodeType.Identifier
-    && parent.parent.type === NodeType.ClassBody
-    && parent.parent.parent.type === NodeType.ClassDeclaration
-    && parent.parent.parent.id?.type === NodeType.Identifier
-  ) {
-    return O.some([parent.parent.parent.id, parent.key]);
-  }
-
   return O.none();
 }

packages/core/src/component/component-name.ts

@@ -1,7 +1,10 @@
-import { getFunctionIdentifier, type TSESTreeFunction } from "@eslint-react/ast";
+import { type TSESTreeFunction } from "@eslint-react/ast";
 import { F, O } from "@eslint-react/tools";
+import type { RuleContext } from "@eslint-react/types";
 import type { TSESTree } from "@typescript-eslint/types";
 
+import { getFunctionComponentIdentifier } from "./component-identifier";
+
 export const RE_COMPONENT_NAME = /^[A-Z]/u;
 
 export function getComponentNameFromIdentifier(node: TSESTree.Identifier | TSESTree.Identifier[]) {
@@ -10,16 +13,22 @@ export function getComponentNameFromIdentifier(node: TSESTree.Identifier | TSEST
     : node.name;
 }
 
-export function isComponentName(name: string): name is string {
+export function isComponentName(name: string) {
   return !!name && RE_COMPONENT_NAME.test(name);
 }
 
-export function hasNoneOrValidComponentName(node: TSESTreeFunction) {
+export function hasNoneOrValidComponentName(node: TSESTreeFunction, context: RuleContext) {
   return O.match(
-    getFunctionIdentifier(node),
+    getFunctionComponentIdentifier(node, context),
     {
       onNone: F.constTrue,
-      onSome: id => isComponentName(id.name),
+      onSome: id => {
+        const name = Array.isArray(id)
+          ? id.at(-1)?.name
+          : id.name;
+
+        return !!name && isComponentName(name);
+      },
     },
   );
 }

packages/plugins/eslint-plugin-debug/src/rules/function-component.spec.ts

@@ -829,7 +829,7 @@ ruleTester.run(RULE_NAME, rule, {
         {
           messageId: "FUNCTION_COMPONENT",
           data: {
-            name: "anonymous",
+            name: "SomeFooter",
             memo: false,
             forwardRef: false,
             hookCalls: 0,
@@ -1035,7 +1035,7 @@ ruleTester.run(RULE_NAME, rule, {
         {
           messageId: "FUNCTION_COMPONENT",
           data: {
-            name: "anonymous",
+            name: "Header",
             memo: false,
             forwardRef: false,
             hookCalls: 0,

packages/plugins/eslint-plugin-react/src/rules/no-unstable-nested-components.ts

@@ -73,7 +73,9 @@ export default createRule<[], MessageID>({
         for (const { node: component, name: componentName } of functionComponents) {
           // Do not mark objects containing render methods
           if (unsafeIsDirectValueOfRenderProperty(component)) continue;
-          const name = O.getOrElse(() => "unknown")(componentName);
+          // Do not mark anonymous function components to reduce false positives
+          if (O.isNone(componentName)) continue;
+          const name = componentName.value;
           const isInsideProperty = component.parent.type === NodeType.Property;
           const isInsideJSXPropValue = isInsidePropValue(component);
           if (isInsideJSXPropValue) {