React render/rerender performance

Show the React reconciler has a cost. First render outputs the new HTML, second render runs the same render, but on the already-populated DOM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<button id="render">Render</button>
<button id="clear">Clear</button>
<pre id="logs"></pre>
<div id="root"></div>

Babel + JSX

const Heading = ({ text }) => <h1>{text}</h1>;
const Content = ({ text }) => <p>{text}</p>;
const Article = ({ heading, content }) => (
  <article>
    <Heading text={heading} />
    <Content text={content} />
  </article>
);

const ArticleList = ({ articles }) => (
	<div>
  {
  	articles.map((article, i) => (
    	<Article
      	key={i}
        heading={article.heading}
        content={article.content}
      />
    ))
  }
  </div>
)

let logs = []
const articles = Array.apply(null, Array(1000)).map((article, index) => ({
	id: index,
  heading: `Heading ${index}`,
  content: `This is test content ${index}`,
}))

function render(articles) {
  const now = performance.now()
  ReactDOM.render(<ArticleList articles={articles} />, document.getElementById('root'))
  
  logs.push('render:' + (performance.now() - now))
  document.getElementById('logs').innerHTML = logs.join('\n')
}

document.getElementById('render').addEventListener('click', (event) => render(articles))

document.getElementById('clear').addEventListener('click', (event) => render([]))