Skip to main content

react/noDirectMutationState

prevent direct mutation of this.state

ESLint Equivalent: no-direct-mutation-state

Examples

Invalid

class Hello extends React.Component {
  testFunc() {
    this.state.foo++;
    return <div>Hello {this.props.name}</div>;
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  testFunc() {
  > 3    this.state.foo++;
         ^^^^^^^^^^^^^^^^
    4    return <div>Hello {this.props.name}</div>;
    5  }

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  testFunc() {
    --this.state.foo;
    return <div>Hello {this.props.name}</div>;
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  testFunc() {
  > 3    --this.state.foo;
         ^^^^^^^^^^^^^^^^
    4    return <div>Hello {this.props.name}</div>;
    5  }

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  testFunc() {
    this.state.foo += 'bar';
    return <div>Hello {this.props.name}</div>;
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  testFunc() {
  > 3    this.state.foo += 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^^
    4    return <div>Hello {this.props.name}</div>;
    5  }

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  testFunc() {
    delete this.state.foo;
    return <div>Hello {this.props.name}</div>;
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  testFunc() {
  > 3    delete this.state.foo;
         ^^^^^^^^^^^^^^^^^^^^^
    4    return <div>Hello {this.props.name}</div>;
    5  }

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  testFunc() {
    this.state.person.name.first = 'bar';
    return <div>Hello</div>;
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  testFunc() {
  > 3    this.state.person.name.first = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4    return <div>Hello</div>;
    5  }

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  testFunc() {
    this.state.person.name.first = 'bar';
    this.state.person.name.last = 'baz';
    return <div>Hello</div>;
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  testFunc() {
  > 3    this.state.person.name.first = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4    this.state.person.name.last = 'baz';
    5    return <div>Hello</div>;

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.

 file.tsx:4:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    2  testFunc() {
    3    this.state.person.name.first = 'bar';
  > 4    this.state.person.name.last = 'baz';
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5    return <div>Hello</div>;
    6  }

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  constructor() {
    someFn()
  }
  someFn() {
    this.state.foo = 'bar';
  }
}

 file.tsx:6:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    4  }
    5  someFn() {
  > 6    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    7  }
    8}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  constructor(props) {
    super(props)
    doSomethingAsync(() => {
      this.state = 'bad';
    });
  }
}

 file.tsx:5:6 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    3    super(props)
    4    doSomethingAsync(() => {
  > 5      this.state = 'bad';
           ^^^^^^^^^^^^^^^^^^
    6    });
    7  }

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  componentWillMount() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  componentWillMount() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  componentDidMount() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  componentDidMount() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  componentWillReceiveProps() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  componentWillReceiveProps() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  shouldComponentUpdate() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  shouldComponentUpdate() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  componentWillUpdate() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  componentWillUpdate() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  componentDidUpdate() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  componentDidUpdate() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.Component {
  componentWillUnmount() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.Component {
    2  componentWillUnmount() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends Component {
  componentWillUnmount() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends Component {
    2  componentWillUnmount() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends React.PureComponent {
  componentWillUnmount() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends React.PureComponent {
    2  componentWillUnmount() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.


class Hello extends PureComponent {
  componentWillUnmount() {
    this.state.foo = 'bar';
  }
}

 file.tsx:3:4 lint/react/noDirectMutationState ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Avoid mutating this.state directly.

    1class Hello extends PureComponent {
    2  componentWillUnmount() {
  > 3    this.state.foo = 'bar';
         ^^^^^^^^^^^^^^^^^^^^^^
    4  }
    5}

  Calling setState() after mutating this.state directly may replace the
    mutation you made. The only place you may set this.state directly is
    in a constructor of a react class component.

Valid

class Hello extends React.Component {
  testFunc() {
    var obj = {state: {}};
    obj.state.name = 'foo';
    return <div>Hello {obj.state.name}</div>;
  }
}
var Hello = 'foo';
module.exports = {};
class Hello {
  getFoo() {
    this.state.foo = 'bar';
    return this.state.foo;
  }
}
class Hello extends React.Component {
  constructor() {
    this.state.foo = 'bar';
  }
}
class Hello extends Component {
  constructor() {
    this.state.foo = 'bar';
  }
}
class Hello extends React.PureComponent {
  constructor() {
    this.state.foo = 'bar';
  }
}
class Hello extends PureComponent {
  constructor() {
    this.state.foo = 'bar';
  }
}
class OneComponent extends Component {
  constructor() {
    super();
    class AnotherComponent extends Component {
      constructor() {
        super();
      }
    }
    this.state = {};
  }
}
class Hello extends React.Component {
  testFunc() {
    typeof this.state.person.name;
    return <div>Hello {this.props.name}</div>;
  }
}
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}
class Example {
  constructor(props) {
    this.state = {
      count: 0
    };
  }
}
class Example extends SuperExample {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}
class Example extends React.SuperExample {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}
class Example extends SuperExample.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}
class Example extends SuperExample.Component {
  someOtherFunction(props) {
    this.state = {
      count: 0
    };
  }
}