fix(plugins/hooks-extra): fix call and new expression related false positives in no-unnecessary-use-memo and no-unnecessary-use-callback (#895)

Author: Rel1cx

CHANGELOG.md

@@ -4,7 +4,11 @@
 
 - refactor: JSX fragments related rules no longer rely on `jsxPragma` and `jsxFragmentPragma` settings to perform their checks
 - refactor: improve applicability of the `no-useless-fragment` and `prefer-shorthand-fragment` rules
-- refactor: deprecate `settings["react-x"].jsxPragma` and `settings["react-x"].jsxFragmentPragma`
+- refactor: deprecate `settings["react-x"].jsxPragma` and `settings["react-x"].jsxFragmentPragma` as they are no longer needed by any rules
+
+### 🐞 Fixes
+
+- fix(plugins/hooks-extra): fix `call` and `new` expression related false positives in `no-unnecessary-use-memo` and `no-unnecessary-use-callback`
 
 ## v1.22.2 (Mon 30 Dec 2024)
 

VERSION

@@ -1 +1 @@
-1.23.0-beta.0
+1.23.0-next.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/monorepo",
-  "version": "1.23.0-beta.0",
+  "version": "1.23.0-next.1",
   "private": true,
   "description": "Monorepo for eslint-plugin-react-[x, dom, web-api, hooks-extra, naming-convention].",
   "keywords": [

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eslint-react/core",
-  "version": "1.23.0-beta.0",
+  "version": "1.23.0-next.1",
   "description": "ESLint React's ESLint utility module for static analysis of React core APIs and Patterns.",
   "homepage": "https://github.com/rEl1cx/eslint-react",
   "bugs": {

packages/plugins/eslint-plugin-react-debug/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-debug",
-  "version": "1.23.0-beta.0",
+  "version": "1.23.0-next.1",
   "description": "ESLint React's ESLint plugin for debugging related rules.",
   "keywords": [
     "react",

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

@@ -23,7 +23,7 @@ export default createRule<[], MessageID>({
     },
     messages: {
       functionComponent:
-        "[function component] name: {{name}}, memo: {{memo}}, forwardRef: {{forwardRef}}, hookCalls: {{hookCalls}}",
+        "[function component] name: {{name}}, memo: {{memo}}, forwardRef: {{forwardRef}}, hookCalls: {{hookCalls}}.",
     },
     schema: [],
   },

packages/plugins/eslint-plugin-react-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-dom",
-  "version": "1.23.0-beta.0",
+  "version": "1.23.0-next.1",
   "description": "ESLint React's ESLint plugin for React DOM related rules.",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-hooks-extra/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-hooks-extra",
-  "version": "1.23.0-beta.0",
+  "version": "1.23.0-next.1",
   "description": "ESLint React's ESLint plugin for React Hooks related rules.",
   "keywords": [
     "react",

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-callback.spec.ts

@@ -4,6 +4,40 @@ import rule, { RULE_NAME } from "./no-unnecessary-use-callback";
 // TODO: Add more tests
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
+    {
+      code: /* tsx */ `
+      import { useState, useCallback } from "react";
+
+      function MyComponent() {
+        const a = 1;
+        const handleSnapshot = useCallback(() => Number(1), []);
+
+        return null;
+      }
+    `,
+      errors: [
+        {
+          messageId: "noUnnecessaryUseCallback",
+        },
+      ],
+    },
+    {
+      code: /* tsx */ `
+      import { useState, useCallback } from "react";
+
+      function MyComponent() {
+        const a = 1;
+        const handleSnapshot = useCallback(() => new String("1"), []);
+
+        return null;
+      }
+    `,
+      errors: [
+        {
+          messageId: "noUnnecessaryUseCallback",
+        },
+      ],
+    },
     {
       code: /* tsx */ `
         import { useCallback } from "react";
@@ -79,25 +113,6 @@ ruleTester.run(RULE_NAME, rule, {
         },
       ],
     },
-    {
-      code: /* tsx */ `
-        import { useCallback } from "react";
-
-        const Comp = () => {
-          const style = useCallback((theme) => ({
-            input: {
-              fontFamily: theme.fontFamilyMonospace
-            }
-          }));
-          return <Button sx={style} />
-        }
-      `,
-      errors: [
-        {
-          messageId: "noUnnecessaryUseCallback",
-        },
-      ],
-    },
     {
       code: /* tsx */ `
         const { useCallback } = require("react");

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-callback.ts

@@ -43,16 +43,10 @@ export default createRule<[], MessageID>({
         const scope = context.sourceCode.getScope(node);
         const component = scope.block;
         if (!AST.isFunction(component)) return;
-        const [cb, deps] = node.arguments;
-        if (!deps) {
-          context.report({
-            messageId: "noUnnecessaryUseCallback",
-            node,
-          });
-          return;
-        }
+        const [arg0, arg1] = node.arguments;
+        if (!arg0 || !arg1) return;
         const hasEmptyDeps = F.pipe(
-          match(deps)
+          match(arg1)
             .with({ type: AST_NODE_TYPES.ArrayExpression }, O.some)
             .with({ type: AST_NODE_TYPES.Identifier }, n => {
               return F.pipe(
@@ -65,15 +59,8 @@ export default createRule<[], MessageID>({
           O.exists(x => x.elements.length === 0),
         );
         if (!hasEmptyDeps) return;
-        if (!cb) {
-          context.report({
-            messageId: "noUnnecessaryUseCallback",
-            node,
-          });
-          return;
-        }
         const isReferencedToComponentScope = F.pipe(
-          match(cb)
+          match(arg0)
             .with({ type: AST_NODE_TYPES.ArrowFunctionExpression }, n => {
               if (n.body.type === AST_NODE_TYPES.ArrowFunctionExpression) {
                 return O.some(n.body);
@@ -93,11 +80,12 @@ export default createRule<[], MessageID>({
           O.map(s => VAR.getChidScopes(s).flatMap(x => x.references)),
           O.exists(refs => refs.some(x => x.resolved?.scope.block === component)),
         );
-        if (isReferencedToComponentScope) return;
-        context.report({
-          messageId: "noUnnecessaryUseCallback",
-          node,
-        });
+        if (!isReferencedToComponentScope) {
+          context.report({
+            messageId: "noUnnecessaryUseCallback",
+            node,
+          });
+        }
       },
     };
   },