React

HTML

<div id="app"></div>

React

class Example1 extends React.Component {
	constructor(props) {
  	super(props)
  	this.state = {
    	count: 0
    };
  }
  
  componentDidMount() {
  	const interval = setInterval(() => {
    	this.setState({count: this.state.count + 1})
    }, 1);
    setTimeout(() => clearInterval(interval), 10000)
  }
  
  render() {
  	return (
    	<div>
        Using setState incorrectly: {this.state.count}
      </div>
    )
  }
}

class Example2 extends React.Component {
	constructor(props) {
  	super(props)
  	this.state = {
    	count: 0
    };
  }
  
  componentDidMount() {
  	const interval = setInterval(() => {
    	this.setState((prevState) => ({count: prevState.count + 1}))
    }, 1);
    
    setTimeout(() => clearInterval(interval), 10000)
  }
  
  render() {
  	return (
    	<div>
        Using setState correctly: {this.state.count}
      </div>
    )
  }
}

class ExampleApp extends React.Component {
  render() {
    return (
      <div>
        <Example1 />
        <Example2/>
      </div>
    )
  }
}

ReactDOM.render(<ExampleApp />, document.querySelector("#app"))