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>

​x
 
<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');

 
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)
var a = React.createElement(FragmentCards, { cards })
ReactDOM.render(a, app1)

Array

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

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Fragment
Array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The benchmark in question is comparing two approaches to rendering React components: React.Fragment and an array-based approach, where each component is rendered as a separate element in an array.

What are we testing?

We're measuring the execution time and number of executions per second for each approach. The benchmark tests how efficiently React can render these components on a desktop machine with Chrome 121 browser.

Options compared:

React.Fragment: This is a built-in React component that allows you to group child elements without adding extra DOM nodes.
Array-based approach: In this implementation, each card (component) is rendered as a separate element in an array. When rendering the cards, React iterates through the array and renders each item.

Pros and Cons:

React.Fragment:
- Pros: No extra DOM nodes are created, making it more efficient.
- Cons: May require additional JavaScript logic to manage children elements.
Array-based approach:
- Pros: Simpler implementation, as there's no need for React-specific child management logic.
- Cons: Creates extra DOM nodes, which can impact performance.

Library and purpose:

The benchmark uses the React library to render components. Specifically, it utilizes the React.createElement function to create React elements and the ReactDOM.render function to render them on the DOM.

Special JS feature or syntax:

There are no special JavaScript features or syntax used in this benchmark that aren't already standard in JavaScript.

Other alternatives:

For those interested in exploring alternative approaches, there are other ways to optimize React rendering. Some examples include:

Server-side rendering (SSR): Rendering components on the server instead of the client-side.
Static site generation: Pre-rendering pages at build time using static site generators like Next.js or Gatsby.
Code splitting: Breaking down large bundles into smaller, optimized chunks to reduce loading times.

In conclusion, this benchmark provides a simple yet insightful way to compare the performance of two React rendering approaches: React.Fragment and an array-based approach. By understanding the pros and cons of each method, developers can make informed decisions about how to optimize their React applications for better performance.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The benchmark in question is comparing two approaches to rendering React components: `React.Fragment` and an array-based approach, where each component is rendered as a separate element in an array.

**What are we testing?**

**Options compared:**

1. **React.Fragment**: This is a built-in React component that allows you to group child elements without adding extra DOM nodes.
2. **Array-based approach**: In this implementation, each card (component) is rendered as a separate element in an array. When rendering the cards, React iterates through the array and renders each item.

**Pros and Cons:**

* **React.Fragment**:
	+ Pros: No extra DOM nodes are created, making it more efficient.
	+ Cons: May require additional JavaScript logic to manage children elements.
* **Array-based approach**:
	+ Pros: Simpler implementation, as there's no need for React-specific child management logic.
	+ Cons: Creates extra DOM nodes, which can impact performance.

**Library and purpose:**

The benchmark uses the React library to render components. Specifically, it utilizes the `React.createElement` function to create React elements and the `ReactDOM.render` function to render them on the DOM.

**Special JS feature or syntax:**

There are no special JavaScript features or syntax used in this benchmark that aren't already standard in JavaScript.

**Other alternatives:**

For those interested in exploring alternative approaches, there are other ways to optimize React rendering. Some examples include:

1. **Server-side rendering (SSR)**: Rendering components on the server instead of the client-side.
2. **Static site generation**: Pre-rendering pages at build time using static site generators like Next.js or Gatsby.
3. **Code splitting**: Breaking down large bundles into smaller, optimized chunks to reduce loading times.

In conclusion, this benchmark provides a simple yet insightful way to compare the performance of two React rendering approaches: `React.Fragment` and an array-based approach. By understanding the pros and cons of each method, developers can make informed decisions about how to optimize their React applications for better performance.

Related benchmarks:

React.Fragment vs ArrayRender (version: 0)

Comparing performance of: Fragment vs Array

Created: 5 years ago by: Guest

Jump to the latest result

Fragment