Benchmarking React with different variances like props, components, markup size, etc

bench-react.js

const Benchmark = require('benchmark');
const React = require('react/dist/react.min');
const ReactDOMServer = require('react-dom/dist/react-dom-server.min');

const suite = new Benchmark.Suite();

// ==========================================================================

// LotsOfBytes test:
// > A metric shit ton of markup output by a single React element.
// 39kb (1024 * 8) : 6,559 ops/sec
// 800kb (1024 * 128) : 233 ops/sec
// 1.7mb (1024 * 256) : 113 ops/sec
//
// function genTest(n) {
//   const text = Array.from(Array(1024 * n)).map((_, i) => i).join(' ')
//   const Element = React.createElement('div', null, text)
//   return () => ReactDOMServer.renderToString(Element)
// }
//
// suite.add('39kb', genTest(8))
// suite.add('800kb', genTest(128))
// suite.add('1.7mb', genTest(256))
//
// Conclusion: Markup size affects render time significantly.

// ==========================================================================

// LotsOfProps test:
//
// > A small HelloWorld example but we pass in a lot of props.
//
// 1 prop x 91,687 ops/sec ±1.87% (83 runs sampled)
// 100 props x 3,291 ops/sec ±1.34% (90 runs sampled)
// 1,000 props x 328 ops/sec ±1.15% (85 runs sampled)
// 100,000 props x 1.88 ops/sec ±6.41% (9 runs sampled)
//
//
// function genTest(n) {
//   const props = Array.from(Array(n)).map((_, i) => i)
//   const Element = React.createElement('div', null, props)
//   return () => ReactDOMServer.renderToString(Element)
// }
//
// suite.add('1 prop', genTest(1))
// suite.add('100 props', genTest(100))
// suite.add('1,000 props', genTest(1000))
// suite.add('100,000 props', genTest(100000))
//
//
// Conclusion: Prop size doesn't seem to affect rendering time.

// ==========================================================================

// HellaComponents test:
//
// > Does the amount of React components have anything to do with render time?
//
// 10 components x 85,969 ops/sec ±1.24% (85 runs sampled)
// 100 components x 17,069 ops/sec ±1.60% (90 runs sampled)
// 1,000 components x 1,828 ops/sec ±0.90% (93 runs sampled)
// 100,000 components x 17.18 ops/sec ±1.10% (46 runs sampled)
//
// function genTest(n) {
//   const Components = Array.from(Array(n)).map((_, i) => null)
//   const Element = React.createElement('div', null, Components)
//   return () => ReactDOMServer.renderToString(Element)
// }
// suite.add('10 components', genTest(10))
// suite.add('100 components', genTest(100))
// suite.add('1,000 components', genTest(1000))
// suite.add('100,000 components', genTest(100000))
//
// ==========================================================================

// HellaDeepComponents test:
//
// > Lots of components in a deeply nested tree.
//
// 1 depth  x 51,897 ops/sec ±1.22% (89 runs sampled)
// 10 depth x 12,298 ops/sec ±2.92% (81 runs sampled)
// 100 depth x 1,415 ops/sec ±2.01% (82 runs sampled)
// 1,000 depth x 101 ops/sec ±2.26% (73 runs sampled)

// function genTest(n) {
//   const next = size => size > 0
//     ? React.createElement('div', null, next(size - 1))
//     : '1'
//
//   const HellaDeepComponents = React.createElement('div', null, next(n))
//   const Element = React.createElement('div', null, HellaDeepComponents)
//   return () => ReactDOMServer.renderToString(Element)
// }
// suite.add('1 depth ', genTest(1))
// suite.add('10 depth', genTest(10))
// suite.add('100 depth', genTest(100))
// suite.add('1,000 depth', genTest(1000))
//
// ==========================================================================


suite.on('cycle', function (event) {
  console.log(String(event.target));
}).on('complete', function () {
  console.log();
  console.log(`Fastest is ${this.filter('fastest').map('name')}`);
}).run();