WIP

Author: Rel1cx

apps/website/content/docs/rules/meta.json

@@ -37,6 +37,7 @@
     "no-missing-context-display-name",
     "no-missing-key",
     "no-misused-capture-owner-stack",
+    "no-misused-use-memo",
     "no-nested-component-definitions",
     "no-nested-lazy-component-declarations",
     "no-prop-types",

packages/plugins/eslint-plugin-react-x/src/rules/no-misused-use-memo.mdx

@@ -0,0 +1,3 @@
+---
+title: no-misused-use-memo
+---

packages/plugins/eslint-plugin-react-x/src/rules/no-misused-use-memo.spec.ts

@@ -0,0 +1,50 @@
+import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
+import tsx from "dedent";
+
+import { ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./no-misused-use-memo";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: tsx`
+        import React, { useMemo } from "react";
+
+        function MyComponent(props) {
+          const data = useMemo(() => {
+            fetch("/api/data"); // Side effect
+            return props.initialData;
+          }, [props.initialData]);
+
+          return <div>{data}</div>;
+        }
+      `,
+      errors: [
+        {
+          type: T.CallExpression,
+          messageId: "noMisusedUseMemo",
+        },
+      ],
+    },
+  ],
+  valid: [
+    {
+      code: `import * as React from 'react';`,
+    },
+    {
+      code: `import {useState} from 'react';`,
+    },
+    {
+      code: `import {} from 'react';`,
+    },
+    {
+      code: `import * as React from "react";`,
+    },
+    {
+      code: `import {useState} from "react";`,
+    },
+    {
+      code: `import {} from "react";`,
+    },
+  ],
+});

packages/plugins/eslint-plugin-react-x/src/rules/no-misused-use-memo.ts

@@ -0,0 +1,68 @@
+import * as AST from "@eslint-react/ast";
+import { isUseMemoCall } from "@eslint-react/core";
+import type { RuleContext, RuleFeature } from "@eslint-react/shared";
+import { SIDE_EFFECT_FUNCTION_NAMES } from "@eslint-react/shared";
+import { AST_NODE_TYPES as T, type TSESTree } from "@typescript-eslint/types";
+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-misused-use-memo";
+
+export const RULE_FEATURES = [
+  "EXP",
+] as const satisfies RuleFeature[];
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Prevents incorrect usage of `useMemo`.",
+      [Symbol.for("rule_features")]: RULE_FEATURES,
+    },
+    messages: {
+      noMisusedUseMemo: "`useMemo` must have no side effects and return a value.",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create,
+  defaultOptions: [],
+});
+
+export function create(context: RuleContext<MessageID, []>): RuleListener {
+  // Fast path: skip if `useMemo` is not present in the file
+  if (!context.sourceCode.text.includes("useMemo")) return {};
+
+  const state = {
+    isWithinUseMemo: false,
+  };
+
+  return {
+    CallExpression(node) {
+      if (isUseMemoCall(node)) {
+        state.isWithinUseMemo = true;
+      }
+      if (!state.isWithinUseMemo) return;
+      const name = match(node.callee)
+        .with({ type: T.Identifier }, (n) => n.name)
+        .with({ type: T.MemberExpression, property: { type: T.Identifier } }, (n) => n.property.name)
+        .otherwise(() => null);
+      if (name == null) return;
+      if (!SIDE_EFFECT_FUNCTION_NAMES.some((effectName) => name.startsWith(effectName))) return;
+      context.report({
+        messageId: "noMisusedUseMemo",
+        node,
+      });
+    },
+    "CallExpression:exit"(node) {
+      if (isUseMemoCall(node)) {
+        state.isWithinUseMemo = false;
+      }
+    },
+  };
+}

packages/shared/docs/README.md

@@ -49,6 +49,7 @@
 - [RE\_REGEXP\_STR](variables/RE_REGEXP_STR.md)
 - [RE\_SNAKE\_CASE](variables/RE_SNAKE_CASE.md)
 - [RE\_TS\_EXT](variables/RE_TS_EXT.md)
+- [SIDE\_EFFECT\_FUNCTION\_NAMES](variables/SIDE_EFFECT_FUNCTION_NAMES.md)
 - [WEBSITE\_URL](variables/WEBSITE_URL.md)
 
 ## Functions

packages/shared/docs/variables/SIDE_EFFECT_FUNCTION_NAMES.md

@@ -0,0 +1,9 @@
+[**@eslint-react/shared**](../README.md)
+
+***
+
+[@eslint-react/shared](../README.md) / SIDE\_EFFECT\_FUNCTION\_NAMES
+
+# Variable: SIDE\_EFFECT\_FUNCTION\_NAMES
+
+> `const` **SIDE\_EFFECT\_FUNCTION\_NAMES**: `string`[]

packages/shared/src/constants.ts

@@ -110,3 +110,77 @@ export const RE_COMPONENT_NAME_LOOSE = /^_?[A-Z]/u;
 export const RE_HOOK_NAME = /^use/u;
 
 // #endregion
+
+// #region Static Data
+
+export const SIDE_EFFECT_FUNCTION_NAMES: string[] = [
+  // Data Operations (CRUD & similar)
+  "set",
+  "add",
+  "create",
+  "update",
+  "save",
+  "delete",
+  "remove",
+  "clear",
+  "reset",
+  "fetch",
+  "patch",
+  "put",
+  "insert",
+  "upsert",
+  "write",
+  "modify",
+  "change",
+  "erase",
+  "destroy",
+  "load",
+  "get",
+  "retrieve",
+
+  // State & Visibility
+  "open",
+  "close",
+  "show",
+  "hide",
+  "start",
+  "stop",
+  "toggle",
+  "enable",
+  "disable",
+  "activate",
+  "deactivate",
+  "begin",
+  "end",
+  "pause",
+  "resume",
+
+  // Events & Communication
+  "dispatch",
+  "send",
+  "trigger",
+  "post",
+  "log",
+  "report",
+  "track",
+  "emit",
+  "broadcast",
+  "notify",
+  "publish",
+  "subscribe",
+  "unsubscribe",
+
+  // Navigation & Routing
+  "navigate",
+  "redirect",
+  "push",
+  "replace",
+
+  // Browser/System Actions
+  "alert",
+  "confirm",
+  "prompt",
+  "print",
+];
+
+// #endregion