import React, { Component } from 'react'

let start = 0
let stop = 0

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      listLength: 20000
    }
    this.rerenderList = this.rerenderList.bind(this)
  }

  componentDidUpdate() {
    stop = performance.now()
    console.log('rerender', stop - start)
  }

  rerenderList() {
    this.setState({
      listLength: 20000
    })
    start = performance.now()
  }

  render() {
    const LIST_LENGTH = this.state.listLength
    return (
      <div>
        <button onClick={this.rerenderList}>Rerender</button>
        <ul>
          {
            Array.apply(null, Array(LIST_LENGTH)).map(function (x, i) {
              return (<li key={i}>{Math.random()}</li>)
            })
          }
        </ul>
      </div>
    )
  }
}

export default App