Run results for: React.Fragment vs ArrayRender

Run details:

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: Chrome 121

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

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

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)