feat: add rules react/no-set-state-in-component-xxx, closes #197, closes #198, closes #199 (#201)

Author: Rel1cx

README.md

@@ -129,9 +129,9 @@ module.exports = {
 - [x] `react/no-script-url`
 - [ ] `react/no-direct-mutation-state`
 - [x] `react/no-redundant-should-component-update`
-- [ ] `react/no-set-state-in-component-did-mount`
-- [ ] `react/no-set-state-in-component-did-update`
-- [ ] `react/no-set-state-in-component-will-update`
+- [x] `react/no-set-state-in-component-did-mount`
+- [x] `react/no-set-state-in-component-did-update`
+- [x] `react/no-set-state-in-component-will-update`
 - [x] `react/no-component-will-mount`
 - [x] `react/no-component-will-update`
 - [x] `react/no-unsafe-component-will-mount`

package.json

@@ -97,7 +97,7 @@
     "taze": "0.13.0",
     "tiny-invariant": "1.3.1",
     "ts-pattern": "5.0.6",
-    "turbo": "1.10.16",
+    "turbo": "1.11.0",
     "type-fest": "4.8.3",
     "typedoc": "0.25.4",
     "typedoc-plugin-markdown": "3.17.1",

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

@@ -25,6 +25,9 @@ import noNamespace from "./rules/no-namespace";
 import noRedundantShouldComponentUpdate from "./rules/no-redundant-should-component-update";
 import noRenderReturnValue from "./rules/no-render-return-value";
 import noScriptUrl from "./rules/no-script-url";
+import noSetStateInComponentDidMount from "./rules/no-set-state-in-component-did-mount";
+import noSetStateInComponentDidUpdate from "./rules/no-set-state-in-component-did-update";
+import noSetStateInComponentWillUpdate from "./rules/no-set-state-in-component-will-update";
 import noStringRefs from "./rules/no-string-refs";
 import noUnsafeComponentWillMount from "./rules/no-unsafe-component-will-mount";
 import noUnsafeComponentWillReceiveProps from "./rules/no-unsafe-component-will-receive-props";
@@ -65,6 +68,9 @@ export const rules = {
   "no-redundant-should-component-update": noRedundantShouldComponentUpdate,
   "no-render-return-value": noRenderReturnValue,
   "no-script-url": noScriptUrl,
+  "no-set-state-in-component-did-mount": noSetStateInComponentDidMount,
+  "no-set-state-in-component-did-update": noSetStateInComponentDidUpdate,
+  "no-set-state-in-component-will-update": noSetStateInComponentWillUpdate,
   "no-string-refs": noStringRefs,
   "no-unsafe-component-will-mount": noUnsafeComponentWillMount,
   "no-unsafe-component-will-receive-props": noUnsafeComponentWillReceiveProps,

packages/eslint-plugin-react/src/rules/no-set-state-in-component-did-mount.md

@@ -0,0 +1,51 @@
+# react/no-set-state-in-component-did-mount
+
+## Rule category
+
+Suspicious.
+
+## What it does
+
+Disallows calling `this.setState` in `componentDidMount` outside of functions, such as callbacks.
+
+## Why is this bad?
+
+Updating the state after a component mount will trigger a second render() call and can lead to property/layout thrashing.
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+import React from "react";
+
+class MyComponent extends React.Component {
+  componentDidMount() {
+    this.setState({ name: "John" });
+  }
+
+  render() {
+    return <div>Hello {this.state.name}</div>;
+  }
+}
+```
+
+### ✅ Correct
+
+```tsx
+import React from "react";
+
+class MyComponent extends React.Component {
+  componentDidMount() {
+    this.onMount(function callback(newName) {
+      this.setState({
+        name: newName,
+      });
+    });
+  }
+
+  render() {
+    return <div>Hello {this.state.name}</div>;
+  }
+}
+```

packages/eslint-plugin-react/src/rules/no-set-state-in-component-did-mount.spec.ts

@@ -0,0 +1,52 @@
+import dedent from "dedent";
+
+import { allValid, defaultParserOptions, RuleTester } from "../../../../test";
+import rule, { RULE_NAME } from "./no-set-state-in-component-did-mount";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: defaultParserOptions,
+});
+
+ruleTester.run(RULE_NAME, rule, {
+  valid: [
+    ...allValid,
+    dedent`
+      class Foo extends React.Component {
+        componentDidMount() {
+          class Bar extends Baz {
+            componentDidMount() {
+              this.setState({ foo: "bar" });
+            }
+          }
+        }
+      }
+    `,
+  ],
+  invalid: [
+    {
+      code: dedent`
+        class Foo extends React.Component {
+          componentDidMount() {
+            this.setState({ foo: "bar" });
+          }
+        }
+      `,
+      errors: [
+        { messageId: "NO_SET_STATE_IN_COMPONENT_DID_MOUNT" },
+      ],
+    },
+    {
+      code: dedent`
+        const Foo = class extends React.Component {
+          componentDidMount() {
+            this.setState({ foo: "bar" });
+          }
+        }
+      `,
+      errors: [
+        { messageId: "NO_SET_STATE_IN_COMPONENT_DID_MOUNT" },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-react/src/rules/no-set-state-in-component-did-mount.ts

@@ -0,0 +1,88 @@
+import { isOneOf, NodeType, traverseUp } from "@eslint-react/ast";
+import { isClassComponent } from "@eslint-react/core";
+import { O } from "@eslint-react/tools";
+import type { TSESTree } from "@typescript-eslint/utils";
+import { ESLintUtils } from "@typescript-eslint/utils";
+import type { ConstantCase } from "string-ts";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "no-set-state-in-component-did-mount";
+
+export type MessageID = ConstantCase<typeof RULE_NAME>;
+
+function isThisSetState(node: TSESTree.CallExpression) {
+  const { callee } = node;
+
+  return (
+    callee.type === NodeType.MemberExpression
+    && callee.object.type === NodeType.ThisExpression
+    && callee.property.type === NodeType.Identifier
+    && callee.property.name === "setState"
+  );
+}
+
+function isComponentDidMount(node: TSESTree.Node) {
+  return isOneOf([NodeType.MethodDefinition, NodeType.PropertyDefinition])(node)
+    && node.key.type === NodeType.Identifier
+    && node.key.name === "componentDidMount";
+}
+
+export default createRule<[], MessageID>({
+  name: RULE_NAME,
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow `setState` in `componentDidMount`",
+      recommended: "recommended",
+      requiresTypeChecking: false,
+    },
+    schema: [],
+    messages: {
+      NO_SET_STATE_IN_COMPONENT_DID_MOUNT: "Do not use `setState` in `componentDidMount`.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      CallExpression(node) {
+        if (!isThisSetState(node)) {
+          return;
+        }
+
+        const maybeParentClass = traverseUp(node, isOneOf([NodeType.ClassDeclaration, NodeType.ClassExpression]));
+
+        if (O.isNone(maybeParentClass)) {
+          return;
+        }
+
+        const parentClass = maybeParentClass.value;
+
+        if (!isClassComponent(parentClass, context)) {
+          return;
+        }
+
+        const maybeParentMethod = traverseUp(node, isComponentDidMount);
+
+        if (O.isNone(maybeParentMethod)) {
+          return;
+        }
+
+        const parentMethod = maybeParentMethod.value;
+
+        if (parentMethod.parent !== parentClass.body) {
+          return;
+        }
+
+        if (context.sourceCode.getScope?.(node).upper !== context.sourceCode.getScope?.(parentMethod)) {
+          return;
+        }
+
+        context.report({
+          node,
+          messageId: "NO_SET_STATE_IN_COMPONENT_DID_MOUNT",
+        });
+      },
+    };
+  },
+});

packages/eslint-plugin-react/src/rules/no-set-state-in-component-did-update.md

@@ -0,0 +1,51 @@
+# react/no-set-state-in-component-did-update
+
+## Rule category
+
+Suspicious.
+
+## What it does
+
+Disallows calling `this.setState` in `componentDidUpdate` outside of functions, such as callbacks.
+
+## Why is this bad?
+
+Updating the state after a component mount will trigger a second render() call and can lead to property/layout thrashing.
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+import React from "react";
+
+class MyComponent extends React.Component {
+  componentDidUpdate() {
+    this.setState({ name: "John" });
+  }
+
+  render() {
+    return <div>Hello {this.state.name}</div>;
+  }
+}
+```
+
+### ✅ Correct
+
+```tsx
+import React from "react";
+
+class MyComponent extends React.Component {
+  componentDidUpdate() {
+    this.onMount(function callback(newName) {
+      this.setState({
+        name: newName,
+      });
+    });
+  }
+
+  render() {
+    return <div>Hello {this.state.name}</div>;
+  }
+}
+```

packages/eslint-plugin-react/src/rules/no-set-state-in-component-did-update.spec.ts

@@ -0,0 +1,52 @@
+import dedent from "dedent";
+
+import { allValid, defaultParserOptions, RuleTester } from "../../../../test";
+import rule, { RULE_NAME } from "./no-set-state-in-component-did-update";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: defaultParserOptions,
+});
+
+ruleTester.run(RULE_NAME, rule, {
+  valid: [
+    ...allValid,
+    dedent`
+      class Foo extends React.Component {
+        componentDidUpdate() {
+          class Bar extends Baz {
+            componentDidUpdate() {
+              this.setState({ foo: "bar" });
+            }
+          }
+        }
+      }
+    `,
+  ],
+  invalid: [
+    {
+      code: dedent`
+        class Foo extends React.Component {
+          componentDidUpdate() {
+            this.setState({ foo: "bar" });
+          }
+        }
+      `,
+      errors: [
+        { messageId: "NO_SET_STATE_IN_COMPONENT_DID_UPDATE" },
+      ],
+    },
+    {
+      code: dedent`
+        const Foo = class extends React.Component {
+          componentDidUpdate() {
+            this.setState({ foo: "bar" });
+          }
+        }
+      `,
+      errors: [
+        { messageId: "NO_SET_STATE_IN_COMPONENT_DID_UPDATE" },
+      ],
+    },
+  ],
+});