feat: add rule react/no-direct-mutation-state, closes #202 (#203)

Author: Rel1cx

CHANGELOG.md

@@ -1,3 +1,22 @@
+## v0.9.3 (Draft)
+
+### Release Notes
+
+#### Add rule `react/no-direct-mutation-state`
+
+---
+
+#### 🏠 Internal
+
+- `@eslint-react/eslint-plugin-react`
+  - Add rule `react/no-direct-mutation-state`.
+
+#### Authors: 1
+
+- Eva1ent ([@Rel1cx](https://github.com/Rel1cx))
+
+---
+
 ## v0.9.2 (Wed Dec 6 2023)
 
 ### Release Notes

README.md

@@ -147,7 +147,7 @@ The following presets are available in this plugin:
 - [x] `react/no-missing-iframe-sandbox`
 - [x] `react/no-missing-component-display-name`
 - [x] `react/no-script-url`
-- [ ] `react/no-direct-mutation-state`
+- [x] `react/no-direct-mutation-state`
 - [x] `react/no-redundant-should-component-update`
 - [x] `react/no-set-state-in-component-did-mount`
 - [x] `react/no-set-state-in-component-did-update`

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

@@ -17,6 +17,7 @@ import noConstructedContextValue from "./rules/no-constructed-context-value";
 import noCreateRef from "./rules/no-create-ref";
 import noDangerouslySetInnerHTML from "./rules/no-dangerously-set-innerhtml";
 import noDangerouslySetInnerHTMLWithChildren from "./rules/no-dangerously-set-innerhtml-with-children";
+import noDirectMutationState from "./rules/no-direct-mutation-state";
 import noFindDomNode from "./rules/no-find-dom-node";
 import noMissingButtonType from "./rules/no-missing-button-type";
 import noMissingComponentDisplayName from "./rules/no-missing-component-display-name";
@@ -60,6 +61,7 @@ export const rules = {
   "no-create-ref": noCreateRef,
   "no-dangerously-set-innerhtml": noDangerouslySetInnerHTML,
   "no-dangerously-set-innerhtml-with-children": noDangerouslySetInnerHTMLWithChildren,
+  "no-direct-mutation-state": noDirectMutationState,
   "no-find-dom-node": noFindDomNode,
   "no-missing-button-type": noMissingButtonType,
   "no-missing-component-display-name": noMissingComponentDisplayName,

packages/eslint-plugin-react/src/rules/no-direct-mutation-state.md

@@ -0,0 +1,78 @@
+# react/no-direct-mutation-state
+
+## Rule category
+
+Correctness.
+
+## What it does
+
+Disallows direct mutation of `this.state`.
+
+## Why is this bad?
+
+NEVER mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
+
+The only place that's acceptable to assign `this.state` is in a class component's `constructor`.
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+import React from "react";
+
+class MyComponent extends React.Component {
+  state = {
+    foo: "bar",
+  };
+
+  componentDidMount() {
+    this.state.foo = "baz";
+  }
+
+  render() {
+    return <div>{this.state.foo}</div>;
+  }
+}
+```
+
+### ✅ Correct
+
+```tsx
+import React from "react";
+
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      foo: "bar",
+    };
+  }
+
+  componentDidMount() {
+    this.setState({ foo: "baz" });
+  }
+
+  render() {
+    return <div>{this.state.foo}</div>;
+  }
+}
+```
+
+```tsx
+import React from "react";
+
+class MyComponent extends React.Component {
+  state = {
+    foo: "bar",
+  };
+
+  componentDidMount() {
+    this.setState({ foo: "baz" });
+  }
+
+  render() {
+    return <div>{this.state.foo}</div>;
+  }
+}
+```

packages/eslint-plugin-react/src/rules/no-direct-mutation-state.spec.ts

@@ -0,0 +1,73 @@
+import dedent from "dedent";
+
+import { allValid, defaultParserOptions, RuleTester } from "../../../../test";
+import rule, { RULE_NAME } from "./no-direct-mutation-state";
+
+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.state = { foo: "bar" };
+            }
+          }
+        }
+      }
+    `,
+    dedent`
+      class Hello extends React.Component {
+        constructor(props) {
+          super(props)
+
+          this.state = {
+            foo: 'bar',
+          }
+        }
+      }
+    `,
+    dedent`
+      import React from "react";
+
+      class MyComponent extends React.Component {
+        state = {
+          foo: "bar",
+        };
+
+        componentDidMount() {
+          this.setState({ foo: "baz" });
+        }
+
+        render() {
+          return <div>{this.state.foo}</div>;
+        }
+      }
+    `,
+  ],
+  invalid: [
+    {
+      code: dedent`
+        class Hello extends React.Component {
+          constructor(props) {
+            super(props)
+
+            // Assign at instance creation time, not on a callback
+            doSomethingAsync(() => {
+              this.state = 'bad';
+            });
+          }
+        }
+      `,
+      errors: [{
+        messageId: "NO_DIRECT_MUTATION_STATE",
+      }],
+    },
+  ],
+});

packages/eslint-plugin-react/src/rules/no-direct-mutation-state.ts

@@ -0,0 +1,82 @@
+import { isOneOf, NodeType, traverseUpGuard } 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-direct-mutation-state";
+
+export type MessageID = ConstantCase<typeof RULE_NAME>;
+
+function isAssignmentToThisState(node: TSESTree.AssignmentExpression) {
+  const { left } = node;
+
+  return (
+    left.type === NodeType.MemberExpression
+    && left.object.type === NodeType.ThisExpression
+    && left.property.type === NodeType.Identifier
+    && left.property.name === "state"
+  );
+}
+
+function isConstructorFunction(
+  node: TSESTree.Node,
+): node is TSESTree.FunctionDeclaration | TSESTree.FunctionExpression {
+  return isOneOf([NodeType.FunctionDeclaration, NodeType.FunctionExpression])(node)
+    && isOneOf([NodeType.MethodDefinition, NodeType.PropertyDefinition])(node.parent)
+    && node.parent.key.type === NodeType.Identifier
+    && node.parent.key.name === "constructor"
+    && node.parent.parent.type === NodeType.ClassBody;
+}
+
+export default createRule<[], MessageID>({
+  name: RULE_NAME,
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow direct mutation of `state`",
+      recommended: "recommended",
+      requiresTypeChecking: false,
+    },
+    schema: [],
+    messages: {
+      NO_DIRECT_MUTATION_STATE: "Do not mutate `state` directly. Use `setState` instead.",
+    },
+  },
+  defaultOptions: [],
+  create(context) {
+    return {
+      AssignmentExpression(node) {
+        if (!isAssignmentToThisState(node)) {
+          return;
+        }
+
+        const maybeParentClass = traverseUpGuard(node, isOneOf([NodeType.ClassDeclaration, NodeType.ClassExpression]));
+
+        if (O.isNone(maybeParentClass)) {
+          return;
+        }
+
+        const parentClass = maybeParentClass.value;
+
+        if (!isClassComponent(parentClass, context)) {
+          return;
+        }
+
+        const maybeParentConstructor = traverseUpGuard(node, isConstructorFunction);
+
+        if (O.exists(maybeParentConstructor, n => context.sourceCode.getScope?.(node).block === n)) {
+          return;
+        }
+
+        context.report({
+          node,
+          messageId: "NO_DIRECT_MUTATION_STATE",
+        });
+      },
+    };
+  },
+});

packages/eslint-plugin/src/index.ts

@@ -48,6 +48,7 @@ const rulePreset = {
   "react/no-create-ref": "error",
   "react/no-dangerously-set-innerhtml": "warn",
   "react/no-dangerously-set-innerhtml-with-children": "error",
+  "react/no-direct-mutation-state": "error",
   "react/no-find-dom-node": "error",
   "react/no-missing-button-type": "warn",
   "react/no-missing-component-display-name": "warn",
@@ -98,6 +99,7 @@ const recommendedPreset = {
   "react/no-create-ref": "error",
   "react/no-dangerously-set-innerhtml": "warn",
   "react/no-dangerously-set-innerhtml-with-children": "error",
+  "react/no-direct-mutation-state": "error",
   "react/no-find-dom-node": "error",
   "react/no-missing-button-type": "warn",
   "react/no-missing-iframe-sandbox": "warn",

website/pages/rules/_meta.json

@@ -32,6 +32,7 @@
   "react-no-create-ref": "react/no-create-ref",
   "react-no-dangerously-set-innerhtml": "react/no-dangerously-set-innerhtml",
   "react-no-dangerously-set-innerhtml-with-children": "react/no-dangerously-set-innerhtml-with-children",
+  "react-no-direct-mutation-state": "react/no-direct-mutation-state",
   "react-no-find-dom-node": "react/no-find-dom-node",
   "react-no-missing-button-type": "react/no-missing-button-type",
   "react-no-missing-component-display-name": "react/no-missing-component-display-name",

website/pages/rules/overview.md

@@ -43,6 +43,7 @@
 | [react/no-create-ref](react-no-create-ref)                                                           | disallow `createRef` in function components                                                |
 | [react/no-dangerously-set-innerhtml](react-no-dangerously-set-innerhtml)                             | disallow when a DOM element is using `dangerouslySetInnerHTML`                             |
 | [react/no-dangerously-set-innerhtml-with-children](react-no-dangerously-set-innerhtml-with-children) | disallow when a DOM element is using both `children` and `dangerouslySetInnerHTML`         |
+| [react/no-direct-mutation-state](react-no-direct-mutation-state)                                     | disallow direct mutation of `this.state`                                                   |
 | [react/no-find-dom-node](react-no-find-dom-node)                                                     | disallow `findDOMNode`                                                                     |
 | [react/no-missing-button-type](react-no-missing-button-type)                                         | enforce that `button` elements have an explicit `type` attribute                           |
 | [react/no-missing-iframe-sandbox](react-no-missing-iframe-sandbox)                                   | enforce that `iframe` elements explicitly specify a `sandbox` attribute                    |