# react/no-unused-state

> Disallow fields of a class component's state that are never read

A state field that's set but never read still makes the component render again each time it changes, and it makes the component look like it depends on that value.

The rule collects the fields from `state = { .. }`, `this.state = { .. }` in the constructor, `getInitialState`, and `this.setState({ .. })`. It reports a field that nothing in the component reads.

{/* 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-unused-state" = "error" # or "warn"
```

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

## Examples

Reported:

{/* bad {"count": 1} */}
```jsx
class Counter extends React.Component {
  state = { count: 0, lastClick: null };

  render() {
    return <button>{this.state.count}</button>;
  }
}
```

{/* bad {"count": 1} */}
```jsx
class Counter extends React.Component {
  handleClick = () => {
    this.setState({ lastClick: Date.now() });
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}
```

Not reported:

{/* good */}
```jsx
class Counter extends React.Component {
  state = { count: 0, lastClick: null };

  render() {
    const { count, lastClick } = this.state;
    return <button title={lastClick}>{count}</button>;
  }
}
```

If the whole state is spread, passed to a function, or read with a computed key, the rule can't tell which fields are used and reports nothing for that component:

{/* good */}
```jsx
class Counter extends React.Component {
  state = { count: 0, lastClick: null };

  render() {
    return <CounterView {...this.state} />;
  }
}
```