Mutating State without setState()

  • Causes state changes without making component re-render.
  • Whenever setState gets called in future, the mutated state gets applied.

Bad

  1. class SampleComponent extends Component {
  2.   constructor(props) {
  3.     super(props);
  5.     this.state = {
  6.       items: ['foo', 'bar']
  7.     };
  9.     this.handleClick = this.handleClick.bind(this);
  10.   }
  12.   handleClick() {
  13.     // BAD: We mutate state here
  14.     this.state.items.push('lorem');
  16.     this.setState({
  17.       items: this.state.items
  18.     });
  19.   }
  21.   render() {
  22.     return (
  23.       <div>
  24.         {this.state.items.length}
  25.         <button onClick={this.handleClick}>+</button>
  26.       </div>
  27.     )
  28.   }
  29. }

Good

  1. class SampleComponent extends Component {
  2.   constructor(props) {
  3.     super(props);
  5.     this.state = {
  6.       items: ['foo', 'bar']
  7.     };
  9.     this.handleClick = this.handleClick.bind(this);
  10.   }
  12.   handleClick() {
  13.     // We update using setState() - concat return new array after appending new item.
  14.     this.setState({
  15.       items: this.state.items.concat('lorem')
  16.     });
  17.   }
  19.   render() {
  20.     return (
  21.       <div>
  22.         {this.state.items.length}
  23.         <button onClick={this.handleClick}>+</button>
  24.       </div>
  25.     )
  26.   }
  27. }

Related links:

React Design Patterns and best practices by Michele Bertoli.