wip: extend no-unneccesary-use-callback

Author: possum-enjoyer

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

@@ -405,6 +405,103 @@ ruleTester.run(RULE_NAME, rule, {
         },
       },
     },
+
+    {
+      code: tsx`
+        import {useCallback, useState, useEffect} from 'react';
+
+        function App({ items }) {
+          const [test, setTest] = useState(0);
+
+          const updateTest = useCallback(() => {setTest(items.length)}, []);
+
+          useEffect(() => {
+            updateTest();
+          }, [updateTest]);
+
+          return <div>items</div>;
+        }
+      `,
+      errors: [
+        {
+          messageId: "noUnnecessaryUseCallbackInsideUseEffect",
+        },
+      ],
+      settings: {
+        "react-x": {
+          importSource: "react",
+        },
+      },
+    },
+    {
+      code: tsx`
+        import {useCallback, useState, useEffect} from 'react';
+
+        function App({ items }) {
+          const [test, setTest] = useState(0);
+
+          const updateTest = useCallback(() => {setTest(items.length)}, []);
+
+          useEffect(() => {
+            updateTest();
+          }, [updateTest]);
+
+          return <div>items</div>;
+        }
+
+                function App({ items }) {
+          const [test, setTest] = useState(0);
+
+          const updateTest = useCallback(() => {setTest(items.length)}, []);
+
+          useEffect(() => {
+            updateTest();
+          }, [updateTest]);
+
+          return <div>items</div>;
+        }
+      `,
+      errors: [
+        {
+          messageId: "noUnnecessaryUseCallbackInsideUseEffect",
+        },
+        {
+          messageId: "noUnnecessaryUseCallbackInsideUseEffect",
+        },
+      ],
+      settings: {
+        "react-x": {
+          importSource: "react",
+        },
+      },
+    },
+        {
+      code: tsx`
+        const { useCallback, useEffect } = require("@pika/react");
+
+        function App({ items }) {
+          const [test, setTest] = useState(0);
+
+          const updateTest = useCallback(() => {setTest(items.length)}, []);
+
+          useEffect(() => {
+            updateTest();
+          }, [updateTest]);
+
+          return <div>items</div>;
+        }
+      `,
+      errors: [
+        {
+          messageId: "noUnnecessaryUseCallbackInsideUseEffect",
+        },
+      ],
+      settings: {
+        "react-x": {
+          importSource: "@pika/react",
+        },
+      },
+    },
   ],
   valid: [
     ...allValid,
@@ -501,5 +598,69 @@ ruleTester.run(RULE_NAME, rule, {
               const refItem = useCallback(cb, deps)
       };
     `,
+    tsx`
+          import { useCallback, useState, useEffect } from 'react';
+
+      function App({ items }) {
+        const [test, setTest] = useState(items.length);
+
+        const updateTest = useCallback(() => { setTest(items.length + 1) }, [setTest, items]);
+
+        useEffect(function () {
+          function foo() {
+            updateTest();
+          }
+
+          foo();
+
+          updateTest();
+        }, [updateTest])
+
+        return <div onClick={() => updateTest()}>{test}</div>;
+      }
+    `,
+    tsx`
+              import { useCallback, useState, useEffect } from 'react';
+
+          const Component = () => {
+        const [test, setTest] = useState(items.length);
+
+        const updateTest = useCallback(() => { setTest(items.length + 1) }, [setTest, items]);
+
+        useEffect(() => {
+          // some condition
+          doSomeTask();
+        }, [doSomeTask]);
+
+        useEffect(() => {
+          // some condition
+          doSomeTask();
+        }, [doSomeTask]);
+
+        return <div />;
+      };
+    `,
+    tsx`
+              import { useCallback, useState, useEffect } from 'react';
+
+          const Component = () => {
+        const [test, setTest] = useState(items.length);
+
+        const updateTest = useCallback(() => { setTest(items.length + 1) }, [setTest, items]);
+
+        return <div ref={() => doSomeTask()} />;
+      };
+    `,
+    tsx`
+              import { useCallback, useState, useEffect } from 'react';
+
+          const Component = () => {
+        const [test, setTest] = useState(items.length);
+
+        const updateTest = useCallback(() => { setTest(items.length + 1) }, [setTest, items]);
+
+        return <div onClick={doSomeTask} />;
+      };
+    `,
   ],
 });

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

@@ -1,13 +1,13 @@
 import * as AST from "@eslint-react/ast";
-import { isUseCallbackCall } from "@eslint-react/core";
+import { isUseCallbackCall, isUseEffectLikeCall } from "@eslint-react/core";
 import { identity } from "@eslint-react/eff";
 import type { RuleContext, RuleFeature } from "@eslint-react/shared";
 import { findVariable, getChildScopes, getVariableDefinitionNode } from "@eslint-react/var";
 import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
-import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
+import { isIdentifier } from "@typescript-eslint/utils/ast-utils";
+import { type RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
 import { match } from "ts-pattern";
-
 import { createRule } from "../utils";
 
 export const RULE_NAME = "no-unnecessary-use-callback";
@@ -16,7 +16,7 @@ export const RULE_FEATURES = [
   "EXP",
 ] as const satisfies RuleFeature[];
 
-export type MessageID = CamelCase<typeof RULE_NAME>;
+export type MessageID = CamelCase<typeof RULE_NAME> | "noUnnecessaryUseCallbackInsideUseEffect";
 
 export default createRule<[], MessageID>({
   meta: {
@@ -28,6 +28,7 @@ export default createRule<[], MessageID>({
     messages: {
       noUnnecessaryUseCallback:
         "An 'useCallback' with empty deps and no references to the component scope may be unnecessary.",
+      noUnnecessaryUseCallbackInsideUseEffect: "{{name}} is only used inside 1 useEffect may be unnecessary.",
     },
     schema: [],
   },
@@ -39,13 +40,16 @@ export default createRule<[], MessageID>({
 export function create(context: RuleContext<MessageID, []>): RuleListener {
   // Fast path: skip if `useCallback` is not present in the file
   if (!context.sourceCode.text.includes("useCallback")) return {};
+
   return {
     CallExpression(node) {
       if (!isUseCallbackCall(node)) {
         return;
       }
+
       const initialScope = context.sourceCode.getScope(node);
       const component = context.sourceCode.getScope(node).block;
+
       if (!AST.isFunction(component)) {
         return;
       }
@@ -99,5 +103,33 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
         });
       }
     },
+    VariableDeclarator(node) {
+      if (!context.sourceCode.text.includes("useEffect")) {
+        return;
+      }
+
+      if (isIdentifier(node.id)) {
+        const references = context.sourceCode.getDeclaredVariables(node)[0]?.references ?? [];
+        const usages = references.filter((ref) => !(ref.init ?? false));
+
+        const size = usages.reduce((set, usage) => {
+          const effect = AST.findParentNode(usage.identifier, (node) => {
+            return isUseEffectLikeCall(node);
+          });
+          set.add(effect ?? node.parent);
+          return set;
+        }, new Set()).size;
+
+        if (size !== 1) {
+          return;
+        }
+
+        context.report({
+          messageId: "noUnnecessaryUseCallbackInsideUseEffect",
+          node,
+          data: { name: node.id.name },
+        });
+      }
+    },
   };
 }