Skip to main content

react/noAccessStateInSetState

prevent using this.state within a this.setState

ESLint Equivalent: no-access-state-in-setstate

Examples

Invalid

class MyComponent extends Component {
	function increment() {
		this.setState({value: this.state.value + 1});
	}
}

 file.tsx:2:10 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unknown class property start

    1class MyComponent extends Component {
  > 2  function increment() {
                ^
    3    this.setState({value: this.state.value + 1});
    4  }


class MyComponent extends Component {
	function increment() {
		this.setState({value: 1 + this.state.value});
	}
}

 file.tsx:2:10 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unknown class property start

    1class MyComponent extends Component {
  > 2  function increment() {
                ^
    3    this.setState({value: 1 + this.state.value});
    4  }


class MyComponent extends Component {
	function toggle() {
		this.setState({
			value: !this.state.value
		});
	}
}

 file.tsx:2:10 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unknown class property start

    1class MyComponent extends Component {
  > 2  function toggle() {
                ^
    3    this.setState({
    4      value: !this.state.value


class MyComponent extends Component {
	function toggle() {
		this.setState({
			value: !!this.state.value
		});
	}
}

 file.tsx:2:10 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unknown class property start

    1class MyComponent extends Component {
  > 2  function toggle() {
                ^
    3    this.setState({
    4      value: !!this.state.value


class MyComponent extends Component {
	update() {
		this.setState({
			foo: bar,
			value: 1 + this.state.value
		});
	}
}

 file.tsx:3:2 lint/react/noAccessStateInSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this.state within a this.setState call.

    1class MyComponent extends Component {
    2  update() {
  > 3    this.setState({
         ^^^^^^^^^^^^^^^
  > 4      foo: bar,
  > 5      value: 1 + this.state.value
  > 6    });
     ^^^^^^
    7  }
    8}

  Batched state calls could result in unexpected errors due to stale
    state data.


class MyComponent extends Component {
	update() {
		this.setState({
			foo: bar,
			value: this.state.value + 1
		});
	}
}

 file.tsx:3:2 lint/react/noAccessStateInSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this.state within a this.setState call.

    1class MyComponent extends Component {
    2  update() {
  > 3    this.setState({
         ^^^^^^^^^^^^^^^
  > 4      foo: bar,
  > 5      value: this.state.value + 1
  > 6    });
     ^^^^^^
    7  }
    8}

  Batched state calls could result in unexpected errors due to stale
    state data.


class MyComponent extends Component {
	update() {
		this.setState({
			value: this.state.value
		});
	}
}

 file.tsx:3:2 lint/react/noAccessStateInSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this.state within a this.setState call.

    1class MyComponent extends Component {
    2  update() {
  > 3    this.setState({
         ^^^^^^^^^^^^^^^
  > 4      value: this.state.value
  > 5    });
     ^^^^^^
    6  }
    7}

  Batched state calls could result in unexpected errors due to stale
    state data.


class MyComponent extends Component {
	update() {
		this.setState({
			foo: bar,
			value: this.state.value
		});
	}
}

 file.tsx:3:2 lint/react/noAccessStateInSetState ━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid using this.state within a this.setState call.

    1class MyComponent extends Component {
    2  update() {
  > 3    this.setState({
         ^^^^^^^^^^^^^^^
  > 4      foo: bar,
  > 5      value: this.state.value
  > 6    });
     ^^^^^^
    7  }
    8}

  Batched state calls could result in unexpected errors due to stale
    state data.

Valid

class MyComponent extends Component {
	update() {
		this.setState({
			foo: bar
		});
	}
}
class MyComponent extends Component {
	increment() {
		this.setState(prevState => ({value: prevState.value + 1}));
	}
}
class MyComponent extends Component {
	increment() {
		this.setState();
	}
}