react/no-will-update-set-state Correctness

What it does

Disallows using setState in the componentWillUpdate lifecycle method.

Why is this bad?

Updating the state during the component update step can lead to indeterminate component state and is not allowed. This can cause unexpected behavior and bugs in your React application.

Examples

Examples of incorrect code for this rule:

jsx

var Hello = createReactClass({
  componentWillUpdate: function () {
    this.setState({
      name: this.props.name.toUpperCase(),
    });
  },
  render: function () {
    return <div>Hello {this.state.name}</div>;
  },
});

Examples of correct code for this rule:

jsx

var Hello = createReactClass({
  componentWillUpdate: function () {
    this.props.prepareHandler();
  },
  render: function () {
    return <div>Hello {this.state.name}</div>;
  },
});

Configuration

This rule accepts one of the following string values:

type: "allowed" | "disallow-in-func"

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)Config (oxlint.config.ts)CLI

json

{
  "plugins": ["react"],
  "rules": {
    "react/no-will-update-set-state": "error"
  }
}

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/no-will-update-set-state": "error",
  },
});

bash

oxlint --deny react/no-will-update-set-state --react-plugin

Version

This rule was added in v1.37.0.

What it does ​

Why is this bad? ​

Examples ​

Configuration ​

How to use ​

Version ​