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

Latest run results:

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

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?**

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:**

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: 6 years ago by: Guest

Jump to the latest result

Fragment

Array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):