feat: add rule react-hooks/prefer-use-state-lazy-initialization, closes #214 (#218)

Author: Rel1cx

packages/ast/docs/README.md

@@ -35,6 +35,7 @@
 - [getFunctionHeadLocation](README.md#getfunctionheadlocation)
 - [getFunctionIdentifier](README.md#getfunctionidentifier)
 - [getFunctionNameWithKind](README.md#getfunctionnamewithkind)
+- [getNestedCallExpressions](README.md#getnestedcallexpressions)
 - [getNestedIdentifiers](README.md#getnestedidentifiers)
 - [getNestedReturnStatements](README.md#getnestedreturnstatements)
 - [getPropertyName](README.md#getpropertyname)
@@ -394,6 +395,22 @@ Get the name and kind of a given function node.
 
 ---
 
+### getNestedCallExpressions
+
+▸ **getNestedCallExpressions**(`node`): `TSESTree.CallExpression`[]
+
+#### Parameters
+
+| Name   | Type   |
+| :----- | :----- |
+| `node` | `Node` |
+
+#### Returns
+
+`TSESTree.CallExpression`[]
+
+---
+
 ### getNestedIdentifiers
 
 ▸ **getNestedIdentifiers**(`node`): `TSESTree.Identifier`[]

packages/ast/src/call.ts

@@ -0,0 +1,101 @@
+import type { TSESTree } from "@typescript-eslint/types";
+
+import { NodeType } from "./node-type";
+
+export function getNestedCallExpressions(node: TSESTree.Node): TSESTree.CallExpression[] {
+  const callExpressions: TSESTree.CallExpression[] = [];
+
+  if (node.type === NodeType.CallExpression) {
+    callExpressions.push(node);
+  }
+
+  if ("arguments" in node) {
+    node.arguments.forEach((x) => {
+      callExpressions.push(...getNestedCallExpressions(x));
+    });
+  }
+
+  if (
+    "expression" in node
+    && node.expression !== true
+    && node.expression !== false
+  ) {
+    callExpressions.push(...getNestedCallExpressions(node.expression));
+  }
+
+  if ("left" in node) {
+    callExpressions.push(...getNestedCallExpressions(node.left));
+  }
+
+  if ("right" in node) {
+    callExpressions.push(...getNestedCallExpressions(node.right));
+  }
+
+  if ("test" in node && node.test !== null) {
+    callExpressions.push(...getNestedCallExpressions(node.test));
+  }
+
+  if ("consequent" in node) {
+    Array.isArray(node.consequent)
+      ? node.consequent.forEach((x) => {
+        callExpressions.push(...getNestedCallExpressions(x));
+      })
+      : callExpressions.push(...getNestedCallExpressions(node.consequent));
+  }
+
+  if ("alternate" in node && node.alternate !== null) {
+    Array.isArray(node.alternate)
+      ? node.alternate.forEach((x: TSESTree.Node) => {
+        callExpressions.push(...getNestedCallExpressions(x));
+      })
+      : callExpressions.push(
+        ...getNestedCallExpressions(node.alternate),
+      );
+  }
+
+  if ("elements" in node) {
+    node.elements.forEach((x) => {
+      if (x !== null) {
+        callExpressions.push(...getNestedCallExpressions(x));
+      }
+    });
+  }
+
+  if ("properties" in node) {
+    node.properties.forEach((x) => {
+      callExpressions.push(...getNestedCallExpressions(x));
+    });
+  }
+
+  if ("expressions" in node) {
+    node.expressions.forEach((x) => {
+      callExpressions.push(...getNestedCallExpressions(x));
+    });
+  }
+
+  if (node.type === NodeType.Property) {
+    callExpressions.push(...getNestedCallExpressions(node.value));
+  }
+
+  if (node.type === NodeType.SpreadElement) {
+    callExpressions.push(...getNestedCallExpressions(node.argument));
+  }
+
+  if (node.type === NodeType.MemberExpression) {
+    callExpressions.push(...getNestedCallExpressions(node.object));
+  }
+
+  if (node.type === NodeType.UnaryExpression) {
+    callExpressions.push(...getNestedCallExpressions(node.argument));
+  }
+
+  if (node.type === NodeType.ChainExpression) {
+    callExpressions.push(...getNestedCallExpressions(node.expression));
+  }
+
+  if (node.type === NodeType.TSNonNullExpression) {
+    callExpressions.push(...getNestedCallExpressions(node.expression));
+  }
+
+  return callExpressions;
+}

packages/ast/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./assignment";
+export * from "./call";
 export * from "./construction";
 export * from "./equal";
 export * from "./eslint-community-eslint-utils";

packages/eslint-plugin-react-hooks/src/index.ts

@@ -5,6 +5,7 @@ import { name, version } from "../package.json";
 import ensureCustomHooksUsingOtherHooks from "./rules/ensure-custom-hooks-using-other-hooks";
 import ensureUseCallbackHasNonEmptyDeps from "./rules/ensure-use-callback-has-non-empty-deps";
 import ensureUseMemoHasNonEmptyDeps from "./rules/ensure-use-memo-has-non-empty-deps";
+import preferUseStateLazyInitialization from "./rules/prefer-use-state-lazy-initialization";
 
 export const meta = {
   name,
@@ -15,4 +16,5 @@ export const rules = {
   "ensure-custom-hooks-using-other-hooks": ensureCustomHooksUsingOtherHooks,
   "ensure-use-callback-has-non-empty-deps": ensureUseCallbackHasNonEmptyDeps,
   "ensure-use-memo-has-non-empty-deps": ensureUseMemoHasNonEmptyDeps,
+  "prefer-use-state-lazy-initialization": preferUseStateLazyInitialization,
 } as const;

packages/eslint-plugin-react-hooks/src/rules/prefer-use-state-lazy-initialization.md

@@ -0,0 +1,33 @@
+# react-hooks/prefer-use-state-lazy-initialization
+
+## Rule category
+
+Perf.
+
+## What it does
+
+Warns about function calls made inside `useState` calls.
+
+## Why is this bad?
+
+A function can be invoked inside a useState call to help create its initial state. However, subsequent renders will still invoke the function while discarding its return value. This is wasteful and can cause performance issues if the function call is expensive.
+
+To combat this issue React allows useState calls to use an [initializer function](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state) which will only be called on the first render.
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+const [value, setValue] = useState(generateTodos());
+```
+
+### ✅ Correct
+
+```tsx
+const [value, setValue] = useState(() => generateTodos());
+```
+
+## Further Reading
+
+- [Official React documentation on useState](https://react.dev/reference/react/useState)