refactor: hookCollector add hookCalls collect, remove cost field (#216)

Author: Rel1cx

CHANGELOG.md

@@ -1,3 +1,29 @@
+## v0.9.6 (Draft)
+
+### Release Notes
+
+#### Add rule `react-hooks/prefer-use-state-lazy-initialization`
+
+---
+
+#### 🏠 Internal
+
+- `@eslint-react/eslint-plugin-react-hooks`
+  - Add rule `react-hooks/prefer-use-state-lazy-initialization`.
+
+- `@eslint-react/eslint-plugin-debug`
+  - Report `hookCalls.length` instead of `cost`.
+
+- `@eslint-react/core`
+  - Replace `cost` field in `ERHook` with `hookCalls` field.
+  - `hookCollector` add `hookCalls` collect.
+
+#### Authors: 1
+
+- Eva1ent ([@Rel1cx](https://github.com/Rel1cx))
+
+---
+
 ## v0.9.5 (Mon Dec 11 2023)
 
 ### Release Notes

packages/core/docs/README.md

@@ -48,6 +48,7 @@
 - [isMemberExpressionOfReactMember](README.md#ismemberexpressionofreactmember)
 - [isMemoOrForwardRefCall](README.md#ismemoorforwardrefcall)
 - [isPureComponent](README.md#ispurecomponent)
+- [isReactHookCall](README.md#isreacthookcall)
 - [isReactHookCallWithName](README.md#isreacthookcallwithname)
 - [isUseCallbackCall](README.md#isusecallbackcall)
 - [isUseContextCall](README.md#isusecontextcall)
@@ -152,13 +153,13 @@
 
 #### Type declaration
 
-| Name   | Type                  |
-| :----- | :-------------------- |
-| `_`    | `string`              |
-| `cost` | `number`              |
-| `id`   | `TSESTree.Identifier` |
-| `name` | `string`              |
-| `node` | `TSESTreeFunction`    |
+| Name        | Type                        |
+| :---------- | :-------------------------- |
+| `_`         | `string`                    |
+| `hookCalls` | `TSESTree.CallExpression`[] |
+| `id`        | `TSESTree.Identifier`       |
+| `name`      | `string`                    |
+| `node`      | `TSESTreeFunction`          |
 
 ## Variables
 
@@ -678,6 +679,25 @@ Check if a node is a React PureComponent
 
 ---
 
+### isReactHookCall
+
+▸ **isReactHookCall**(`node`): `void`
+
+TODO: Implement this function.
+Check if the given node is a React Hook call by its name and its hierarchy.
+
+#### Parameters
+
+| Name   | Type             | Description        |
+| :----- | :--------------- | :----------------- |
+| `node` | `CallExpression` | The node to check. |
+
+#### Returns
+
+`void`
+
+---
+
 ### isReactHookCallWithName
 
 ▸ **isReactHookCallWithName**(`name`): (`node`: `CallExpression`, `context`: `Readonly`\<`RuleContext`\<`string`, readonly `unknown`[]\>\>, `pragma`: `string`) => `boolean`
@@ -993,16 +1013,20 @@ _ = <Component rows={[{ render: () => <div /> }]} />;
 
 ▸ **unsafeIsReactHookCall**(`node`): `boolean`
 
+Check if the given node is a React Hook call by its name.
+
 #### Parameters
 
-| Name   | Type             |
-| :----- | :--------------- |
-| `node` | `CallExpression` |
+| Name   | Type             | Description        |
+| :----- | :--------------- | :----------------- |
+| `node` | `CallExpression` | The node to check. |
 
 #### Returns
 
 `boolean`
 
+`true` if the node is a React hook call, `false` otherwise.
+
 ---
 
 ### unsafeIsRenderFunction

packages/core/src/hook/hook-call.ts

@@ -37,6 +37,11 @@ export const isUseImperativeHandleCall = isReactHookCallWithName("useImperativeH
 
 export const isUseDebugValueCall = isReactHookCallWithName("useDebugValue");
 
+/**
+ * Check if the given node is a React Hook call by its name.
+ * @param node The node to check.
+ * @returns `true` if the node is a React hook call, `false` otherwise.
+ */
 export function unsafeIsReactHookCall(node: TSESTree.CallExpression) {
   if (node.callee.type === NodeType.Identifier) {
     return isValidReactHookName(node.callee.name);
@@ -52,6 +57,17 @@ export function unsafeIsReactHookCall(node: TSESTree.CallExpression) {
   return false;
 }
 
+/**
+ * TODO: Implement this function.
+ * Check if the given node is a React Hook call by its name and its hierarchy.
+ * @param node The node to check.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function isReactHookCall(node: TSESTree.CallExpression) {
+  // eslint-disable-next-line functional/no-throw-statements
+  throw new Error("Not implemented");
+}
+
 export function isMemoOrForwardRefCall(node: TSESTree.Node, context: RuleContext) {
   return isCallFromPragma("memo")(node, context)
     || isCallFromPragma("forwardRef")(node, context);

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

@@ -3,8 +3,8 @@ import { uid } from "@eslint-react/shared";
 import { O } from "@eslint-react/tools";
 import type { ESLintUtils, TSESTree } from "@typescript-eslint/utils";
 
+import type { ERHook } from "./hook";
 import { unsafeIsReactHookCall } from "./hook-call";
-import type { ERHook } from "./hook-kind";
 import { isValidReactHookName } from "./hook-name";
 
 export function hookCollector(): {
@@ -34,7 +34,7 @@ export function hookCollector(): {
         _: key,
         id,
         name,
-        cost: 1,
+        hookCalls: [],
         node: currentFn,
       });
     }
@@ -76,7 +76,10 @@ export function hookCollector(): {
         }
         hooks.set(hook._, {
           ...hook,
-          cost: hook.cost + 1,
+          hookCalls: [
+            ...hook.hookCalls,
+            node,
+          ],
         });
       }
     },

packages/core/src/hook/hook-kind.ts renamed to packages/core/src/hook/hook.ts

@@ -17,5 +17,7 @@ export type ERHook = {
   // The number of hooks defined in the hook, reserved for future use
   // size: number;
   // The number of slots the hook takes, (1 + the number of other hooks it calls)
-  cost: number;
+  // cost: number;
+  // The other hooks called by the hook
+  hookCalls: TSESTree.CallExpression[];
 };

packages/core/src/hook/index.ts

@@ -1,5 +1,5 @@
 export * from "./hierarchy";
+export * from "./hook";
 export * from "./hook-call";
 export * from "./hook-collector";
-export * from "./hook-kind";
 export * from "./hook-name";

packages/eslint-plugin-debug/src/rules/react-hooks.spec.ts

@@ -25,7 +25,7 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useToggle",
-            cost: 2,
+            hookCalls: 1,
           },
         },
       ],
@@ -42,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useSorted",
-            cost: 1,
+            hookCalls: 0,
           },
         },
       ],
@@ -64,14 +64,14 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useToggle",
-            cost: 2,
+            hookCalls: 1,
           },
         },
         {
           messageId: "REACT_HOOKS",
           data: {
             name: "useSorted",
-            cost: 1,
+            hookCalls: 0,
           },
         },
       ],
@@ -95,7 +95,7 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useClassnames",
-            cost: 1,
+            hookCalls: 0,
           },
         },
       ],
@@ -119,7 +119,7 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useClassnames",
-            cost: 1,
+            hookCalls: 0,
           },
         },
       ],
@@ -140,14 +140,14 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useNestedHook",
-            cost: 2,
+            hookCalls: 1,
           },
         },
         {
           messageId: "REACT_HOOKS",
           data: {
             name: "useInnerHook",
-            cost: 1,
+            hookCalls: 0,
           },
         },
       ],
@@ -168,14 +168,14 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useNestedHook",
-            cost: 1,
+            hookCalls: 0,
           },
         },
         {
           messageId: "REACT_HOOKS",
           data: {
             name: "useInnerHook",
-            cost: 2,
+            hookCalls: 1,
           },
         },
       ],
@@ -196,7 +196,7 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "REACT_HOOKS",
           data: {
             name: "useNestedHook",
-            cost: 1,
+            hookCalls: 0,
           },
         },
       ],

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

@@ -18,7 +18,7 @@ export default createRule<[], MessageID>({
     },
     schema: [],
     messages: {
-      REACT_HOOKS: "[react hooks] name: {{name}}, cost: {{cost}}",
+      REACT_HOOKS: "[react hooks] name: {{name}}, hookCalls: {{hookCalls}}",
     },
   },
   defaultOptions: [],
@@ -30,11 +30,11 @@ export default createRule<[], MessageID>({
       "Program:exit"(node) {
         const allHooks = ctx.getAllHooks(node);
 
-        for (const { name, cost, node } of allHooks.values()) {
+        for (const { name, hookCalls, node } of allHooks.values()) {
           context.report({
             data: {
               name,
-              cost,
+              hookCalls: hookCalls.length,
             },
             messageId: "REACT_HOOKS",
             node,

packages/eslint-plugin-react-hooks/src/rules/ensure-custom-hooks-using-other-hooks.ts

@@ -29,8 +29,8 @@ export default createRule<[], MessageID>({
       ...listeners,
       "Program:exit"(node) {
         const allHooks = ctx.getAllHooks(node);
-        for (const { name, cost, node } of allHooks.values()) {
-          if (cost > 1) {
+        for (const { name, hookCalls, node } of allHooks.values()) {
+          if (hookCalls.length > 0) {
             continue;
           }