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

> Disallow `this.setState` in `componentWillUpdate`

React calls `componentWillUpdate` right before it renders an update. Calling `this.setState` there starts another update before the current one is done, and the component can end up updating forever.

The rule checks `UNSAFE_componentWillUpdate` too.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/no-will-update-set-state" = "error" # or "warn"
```

Every option, set to its default. The ones that are commented out are unset by default.

```toml bunfig.toml
[lint.rules]
"react/no-will-update-set-state" = [
  "error",
  # "disallow-in-func",
]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
class Price extends React.Component {
  componentWillUpdate(nextProps) {
    this.setState({ total: nextProps.amount * nextProps.quantity });
  }
  render() {
    return <span>{this.state.total}</span>;
  }
}
```

Not reported:

{/* good */}
```jsx
class Price extends React.Component {
  render() {
    const total = this.props.amount * this.props.quantity;
    return <span>{total}</span>;
  }
}
```

## Options

| Option | What it does |
| --- | --- |
| none (default) | Allow `this.setState` in a function nested in the method, such as a callback that runs later. |
| `"disallow-in-func"` | Report those calls too. |

By default this is allowed, because the callback runs after the update:

{/* good */}
```jsx
class Price extends React.Component {
  componentWillUpdate() {
    loadRates().then(rates => {
      this.setState({ rates });
    });
  }
}
```

With `"disallow-in-func"` it's reported:

{/* bad {"options": ["disallow-in-func"]} */}
```jsx
class Price extends React.Component {
  componentWillUpdate() {
    loadRates().then(rates => {
      this.setState({ rates });
    });
  }
}
```