fix: enhance hooks-extra/prefer-use-state-lazy-initialization to correctly detect other hooks called within useState(...) (#1006)

Author: Rel1cx

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

@@ -3,3 +3,7 @@ export const RE_HOOK_NAME = /^use[A-Z\d]/u;
 export function isReactHookName(name: string) {
   return name === "use" || RE_HOOK_NAME.test(name);
 }
+
+export function isReactHookNameLoose(name: string) {
+  return name.startsWith("use");
+}

packages/core/src/hook/is.ts

@@ -34,8 +34,8 @@ export function isReactHookCall(node: TSESTree.Node | _) {
   return false;
 }
 
-export function isReactHookCallWithName(context: RuleContext, node: TSESTree.CallExpression | _) {
-  if (node == null) return constFalse;
+export function isReactHookCallWithName(context: RuleContext, node: TSESTree.Node | _) {
+  if (node == null || node.type !== T.CallExpression) return constFalse;
   const {
     importSource = DEFAULT_ESLINT_REACT_SETTINGS.importSource,
     skipImportCheck = true,
@@ -57,8 +57,8 @@ export function isReactHookCallWithName(context: RuleContext, node: TSESTree.Cal
   };
 }
 
-export function isReactHookCallWithNameLoose(node: TSESTree.CallExpression | _) {
-  if (node == null) return constFalse;
+export function isReactHookCallWithNameLoose(node: TSESTree.Node | _) {
+  if (node == null || node.type !== T.CallExpression) return constFalse;
   return (name: string) => {
     switch (node.callee.type) {
       case T.Identifier:
@@ -109,16 +109,20 @@ export function isUseEffectCallLoose(node: TSESTree.Node | _) {
   }
 }
 
+export const isUseCall = flip(isReactHookCallWithName)("use");
+export const isUseActionStateCall = flip(isReactHookCallWithName)("useActionState");
 export const isUseCallbackCall = flip(isReactHookCallWithName)("useCallback");
 export const isUseContextCall = flip(isReactHookCallWithName)("useContext");
 export const isUseDebugValueCall = flip(isReactHookCallWithName)("useDebugValue");
 export const isUseDeferredValueCall = flip(isReactHookCallWithName)("useDeferredValue");
 export const isUseEffectCall = flip(isReactHookCallWithName)("useEffect");
+export const isUseFormStatusCall = flip(isReactHookCallWithName)("useFormStatus");
 export const isUseIdCall = flip(isReactHookCallWithName)("useId");
 export const isUseImperativeHandleCall = flip(isReactHookCallWithName)("useImperativeHandle");
 export const isUseInsertionEffectCall = flip(isReactHookCallWithName)("useInsertionEffect");
 export const isUseLayoutEffectCall = flip(isReactHookCallWithName)("useLayoutEffect");
 export const isUseMemoCall = flip(isReactHookCallWithName)("useMemo");
+export const isUseOptimisticCall = flip(isReactHookCallWithName)("useOptimistic");
 export const isUseReducerCall = flip(isReactHookCallWithName)("useReducer");
 export const isUseRefCall = flip(isReactHookCallWithName)("useRef");
 export const isUseStateCall = flip(isReactHookCallWithName)("useState");

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.spec.ts

@@ -5,178 +5,145 @@ import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./prefer-use-state-lazy-initialization";
 
 ruleTester.run(RULE_NAME, rule, {
-  invalid: ([
-    ["getValue()", T.CallExpression],
-    ["getValue(1, 2, 3)", T.CallExpression],
-    ["new Foo()", T.NewExpression],
-  ] satisfies [string, T][]).flatMap(([expression, type]) => [
+  invalid: [
     {
-      code: `import { useState } from "react"; useState(1 || ${expression})`,
+      code: `import { useState } from "react"; useState(1 || getValue())`,
       errors: [
         {
-          type: T.LogicalExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(2 < ${expression})`,
+      code: `import { useState } from "react"; useState(2 < getValue())`,
       errors: [
         {
-          type: T.BinaryExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(${expression})`,
+      code: `import { useState } from "react"; useState(1 < 2 ? getValue() : 4)`,
       errors: [
         {
-          type,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(a ? b : ${expression})`,
+      code: `import { useState } from "react"; useState(a ? b : getValue())`,
       errors: [
         {
-          type: T.ConditionalExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(${expression} ? b : c)`,
+      code: `import { useState } from "react"; useState(getValue() ? b : c)`,
       errors: [
         {
-          type: T.ConditionalExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(a ? (b ? ${expression} : b2) : c)`,
+      code: `import { useState } from "react"; useState(a ? (b ? getValue() : b2) : c)`,
       errors: [
         {
-          type: T.ConditionalExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(${expression} && b)`,
+      code: `import { useState } from "react"; useState(getValue() && b)`,
       errors: [
         {
-          type: T.LogicalExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(a && ${expression})`,
+      code: `import { useState } from "react"; useState(a() && new Foo())`,
       errors: [
         {
-          type: T.LogicalExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
-      ],
-    },
-    {
-      code: `import { useState } from "react"; useState(${expression} && b())`,
-      errors: [
-        {
-          type: T.LogicalExpression,
-          messageId: "preferUseStateLazyInitialization",
-        },
-      ],
-    },
-    {
-      code: `import { useState } from "react"; useState(a() && ${expression})`,
-      errors: [
-        {
-          type: T.LogicalExpression,
-          messageId: "preferUseStateLazyInitialization",
-        },
-      ],
-    },
-    {
-      code: `import { useState } from "react"; useState(+${expression})`,
-      errors: [
         {
-          type: T.UnaryExpression,
+          type: T.NewExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(-${expression})`,
+      code: `import { useState } from "react"; useState(+getValue())`,
       errors: [
         {
-          type: T.UnaryExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(~${expression})`,
+      code: `import { useState } from "react"; useState(getValue() + 1)`,
       errors: [
         {
-          type: T.UnaryExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(!${expression})`,
+      code: `import { useState } from "react"; useState([getValue()])`,
       errors: [
         {
-          type: T.UnaryExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(${expression} + 1)`,
+      code: `import { useState } from "react"; useState({ a: getValue() })`,
       errors: [
         {
-          type: T.BinaryExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
     },
     {
-      code: `import { useState } from "react"; useState(${expression} - 1)`,
-      errors: [
-        {
-          type: T.BinaryExpression,
-          messageId: "preferUseStateLazyInitialization",
-        },
-      ],
-    },
-    {
-      code: `import { useState } from "react"; useState([${expression}])`,
+      code: tsx`
+        import { useState, use } from 'react';
+
+        function Component({data}) {
+          const [data, setData] = useState(data ? use(data) : getValue());
+          return null;
+        }
+      `,
       errors: [
         {
-          type: T.ArrayExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
-    },
-    {
-      code: `import { useState } from "react"; useState({ a: ${expression} })`,
-      errors: [
-        {
-          type: T.ObjectExpression,
-          messageId: "preferUseStateLazyInitialization",
+      settings: {
+        "react-x": {
+          version: "19.0.0",
         },
-      ],
+      },
     },
     {
-      code: tsx`useLocalStorageState(1 || ${expression})`,
+      code: tsx`useLocalStorageState(1 || getValue())`,
       errors: [
         {
-          type: T.LogicalExpression,
+          type: T.CallExpression,
           messageId: "preferUseStateLazyInitialization",
         },
       ],
@@ -188,7 +155,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       },
     },
-  ]),
+  ],
   valid: [
     ...allValid,
     "useState()",
@@ -260,7 +227,11 @@ ruleTester.run(RULE_NAME, rule, {
     'const { useState } = require("react"); useState(1 < 2 ? 3 : 4)',
     'const { useState } = require("react"); useState(1 == 2 ? 3 : 4)',
     'const { useState } = require("react"); useState(1 === 2 ? 3 : 4)',
+    "const [id, setId] = useState(useId());",
     "const [state, setState] = useState(use(promise));",
+    "const [serverData, setLikes] = useState(use(getLikes()));",
+    "const [data, setData] = useState(use(getData()) || []);",
+    "const [character, setCharacter] = useState(use(props.character) ?? undefined);",
     {
       code: tsx`
         import { useState, use } from 'react';
@@ -278,55 +249,11 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: tsx`
-        import { useState, use } from 'react';
-
-        const promise = Promise.resolve();
-
-        function App() {
-          const [state, setState] = useState(use(promise));
-
-          return null;
-        }
-
-        export default App;
-      `,
-      settings: {
-        "react-x": {
-          version: "19.0.0",
-        },
-      },
-    },
-    {
-      code: "useLocalStorageState()",
+      code: "useLocalStorage(() => JSON.parse('{}'))",
       settings: {
         "react-x": {
           additionalHooks: {
-            useState: ["useLocalStorageState"],
-          },
-        },
-      },
-    },
-    {
-      code: tsx`
-        import { useState } from 'react';
-
-        function getValue() {
-          return 0;
-        }
-
-        function App() {
-          const [count, setCount] = useState(() => getValue());
-
-          return null;
-        }
-
-        export default App;
-      `,
-      settings: {
-        "react-x": {
-          additionalHooks: {
-            useState: ["useLocalStorageState"],
+            useState: ["useLocalStorage"],
           },
         },
       },