Benchmark: React.Fragment vs ArrayRender

HTML Preparation code:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app1"></div>
<div id="app2"></div>

Script Preparation code:

var cards = function () {
  return new Array(28).fill(null).map(function (card) {
    return new Array(4).fill(null).map(function (_, index) {
      return "azaza".concat(index);
    });
  });
}();

console.log(cards)

var FragmentCard = function FragmentCard(props) {
  return React.createElement(React.Fragment, null, props.words.map(function (word) {
    return React.createElement(React.Fragment, null, "word", React.createElement("div", null));
  }));
};

var FragmentCards = function FragmentCards(props) {
  return props.cards.map(function (words) {
    return React.createElement(FragmentCard, {
      words: words
    });
  });
};

var ArrayCard = function ArrayCard(props) {
  return React.createElement(React.Fragment, null, props.words.reduce(function (result, feature, index, _ref) {
    var length = _ref.length;
    result.push(feature, index < length - 1 && React.createElement("div", {
      key: "s".concat(index)
    }));
    return result;
  }, []));
};

var ArrayCards = function ArrayCards(props) {
  return props.cards.map(function (words) {
    return React.createElement(ArrayCard, {
      words: words
    });
  });
};

var app1 = document.getElementById('app1');
var app2 = document.getElementById('app2');

Tests:

Fragment
var a = React.createElement(FragmentCards, { cards }) ReactDOM.render(a, app1)
Array
var a = React.createElement(ArrayCards, { cards }) ReactDOM.render(a, app2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Fragment
Array

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
Fragment	13897.0 Ops/sec
Array	23261.6 Ops/sec

React.Fragment vs ArrayRender (version: 0)

Comparing performance of: Fragment vs Array

Created: 4 years ago by: Guest

Jump to the latest result

Fragment

Array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A