In this lesson we'll take a stopwatch component we built in another lesson and identify and fix a memory leak.
<body> <script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> <div id="root"></div> <script type="text/babel"> class StopWatch extends React.Component { state = {lapse: 0, running: false} handleRunClick = () => { this.setState(state => { if (state.running) { clearInterval(this.timer) } else { const startTime = Date.now() - this.state.lapse this.timer = setInterval(() => { this.setState( { lapse: Date.now() - startTime, }, () => { console.log(this.state.lapse) }, ) }) } return {running: !state.running} }) } handleClearClick = () => { clearInterval(this.timer) this.setState({lapse: 0, running: false}) } componentWillUnmount() { clearInterval(this.timer) } render() { const {lapse, running} = this.state const buttonStyles = { border: '1px solid #ccc', background: '#fff', fontSize: '2em', padding: 15, margin: 5, 200, } return ( <div style={{textAlign: 'center'}}> <label style={{ fontSize: '5em', display: 'block', }} > {lapse}ms </label> <button onClick={this.handleRunClick} style={buttonStyles} > {running ? 'Stop' : 'Start'} </button> <button onClick={this.handleClearClick} style={buttonStyles} > Clear </button> </div> ) } } class App extends React.Component { state = {showStopWatch: true} render() { const {showStopWatch} = this.state return ( <div> <label> Show Stop Watch{' '} <input type="checkbox" checked={showStopWatch} onChange={() => this.setState(s => ({ showStopWatch: !s.showStopWatch, }))} /> </label> <hr /> {showStopWatch ? <StopWatch /> : null} </div> ) } } const element = <App /> ReactDOM.render( element, document.getElementById('root'), ) </script> </body>
Tow things to notice here is that:
1. this.setState(), we can pass an update function, which take param 'state' and return a new state
this.setState((state) => ({newState}))
2. Pass a second param to setState() as a callback:
this.setState(newState, callback)