React render performance

by Hajime Yamasaki Vukelic

HTML

<script src="https://cdn.jsdelivr.net/npm/react@16.2.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.2.0/umd/react-dom.production.min.js"></script>
<div id="root">

</div>

JavaScript

const h = React.createElement

window.process = {}

let i = 0
const t = []

const lap = label => {
  const start = new Date().getTime()
  return () => {
    console.log(label, 'took', new Date().getTime() - start, 'ms')
  }
}


const endAll = lap('all')
const endData = lap('data')
while (i < 10000) {
	t.push({created: new Date().getTime(), done: false, editing: Math.random() < 0.5, text: 'Task' + i})
  i += 1
}
endData()


const endUI = lap('ui build')
const Ui = h('div', {}, (() => {
  let items = []
  const l = t.length
  for (let i = 0; i < l; i += 1) {
    const task = t[i]
    items.push(h('div', {className: 'tasks'}, [
      h('button', {}, task.done ? 'Check' : 'Remove'),
      task.editing
        ? h('span', {className: 'task'}, task.text)
        : h('span', {}, [
          h('input', {value: task.text}),
          h('button', {}, 'Save')
        ])
    ]))
  }
  return items
})())
endUI()

const endRender = lap('render')
ReactDOM.render(Ui, document.querySelector('#root'))
endRender()
endAll()