Fix Report: ESLint Rules of Hooks Bug in Default Export Arrow Functions

packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js

@@ -547,17 +547,6 @@ const allTests = {
       // TODO: this should error but doesn't.
       // errors: [functionError('use', 'notAComponent')],
     },
-    {
-      code: normalizeIndent`
-        export default () => {
-          if (isVal) {
-            useState(0);
-          }
-        }
-      `,
-      // TODO: this should error but doesn't.
-      // errors: [genericError('useState')],
-    },
     {
       code: normalizeIndent`
         function notAComponent() {
@@ -615,7 +604,7 @@ const allTests = {
             onClick();
           });
           useServerEffect(() => {
-            onClick();  
+            onClick();
           });
         }
       `,
@@ -845,7 +834,7 @@ const allTests = {
     },
     {
       code: normalizeIndent`
-        // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect 
+        // Valid because functions created with useEffectEvent can be passed by reference in useLayoutEffect
         // and useInsertionEffect.
         function MyComponent({ theme }) {
           const onClick = useEffectEvent(() => {
@@ -915,6 +904,16 @@ const allTests = {
     },
   ],
   invalid: [
+    {
+      code: normalizeIndent`
+        export default () => {
+          if (isVal) {
+            useState(0);
+          }
+        }
+      `,
+      errors: [functionError('useState', 'default')],
+    },
     {
       syntax: 'flow',
       code: normalizeIndent`

packages/eslint-plugin-react-hooks/src/rules/RulesOfHooks.ts

@@ -701,9 +701,14 @@ const rule = {
               context.report({node: hook, message});
             } else if (codePathFunctionName) {
               // Custom message if we found an invalid function name.
+              // Handle both real AST nodes and synthetic identifiers (e.g., for default exports)
+              const functionNameText =
+                'name' in codePathFunctionName && typeof codePathFunctionName.name === 'string'
+                  ? codePathFunctionName.name
+                  : getSourceCode().getText(codePathFunctionName);
               const message =
                 `React Hook "${getSourceCode().getText(hook)}" is called in ` +
-                `function "${getSourceCode().getText(codePathFunctionName)}" ` +
+                `function "${functionNameText}" ` +
                 'that is neither a React function component nor a custom ' +
                 'React Hook function.' +
                 ' React component names must start with an uppercase letter.' +
@@ -916,6 +921,13 @@ function getFunctionName(node: Node) {
       // Kinda clowny, but we'd said we'd follow spec convention for
       // `IsAnonymousFunctionDefinition()` usage.
       return node.parent.left;
+    } else if (node.parent?.type === 'ExportDefaultDeclaration') {
+      // export default () => {};
+      // export default function() {};
+      //
+      // For default exports, we use a synthetic identifier to represent
+      // the "default" export name, which is not a valid component name.
+      return {type: 'Identifier', name: 'default'} as Node;
     } else {
       return undefined;
     }