Benchmark: recursive vs non recursive react component rendering

HTML Preparation code:

<!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
  </head>
  <body>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/cjs/react.production.min.js'></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
	<div id="root"></div> 
  </body>
</html>

Script Preparation code:

function Greeting({ name, age }) {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Hello ', name),
    React.createElement('p', null, 'some text'),
    React.createElement('p', null, 'some text'),
    React.createElement('p', null, 'some text'),
    React.createElement('p', null, 'some text'),
    React.createElement('div', null, age)
  );
}

function NonRecursiveRenderer({ userData }) {
  return React.createElement(
    'div',
    null,
    userData &&
      userData.map(({ name, age, child }) =>
        React.createElement(
          'div',
          null,
          Greeting({ name, age }),
          child &&
            child.map(({ name, age, child }) =>
              React.createElement(
                'div',
                null,
                Greeting({ name, age }),
                child &&
                  child.map(({ name, age, child }) =>
                    React.createElement('div', null, Greeting({ name, age }))
                  )
              )
            )
        )
      )
  );
}

function RecursiveRenderer({ userData }) {
  return React.createElement(
    'div',
    null,
    userData &&
      userData.map(({ name, age, child }) =>
        React.createElement(
          'div',
          null,
          Greeting({ name, age }),
          child && child.map((childData) => RecursiveRenderer(childData))
        )
      )
  );
}

function RenderNonRecursively({ userData }) {
  return React.createElement(NonRecursiveRenderer, { userData: userData });
}

function RenderRecursively({ userData }) {
  return React.createElement(RecursiveRenderer, { userData: userData });
}

Tests:

Recursive rendering
const userData = [{name: 'a', age: '2'},{name: 'a', age: '2', child: [{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]},{name: 'a', age: '2'},{name: 'a', age: '2', child: [{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]}] ReactDOM.render(React.createElement(RenderRecursively, {userData: userData}), document.getElementById('root'))
Non recursive rendering
const userData = [{name: 'a', age: '2'},{name: 'a', age: '2', child: [{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]},{name: 'a', age: '2'},{name: 'a', age: '2', child: [{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]}] ReactDOM.render(React.createElement(RenderNonRecursively, {userData: userData}), document.getElementById('root'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Recursive rendering
Non recursive rendering

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Recursive rendering	194166.4 Ops/sec
Non recursive rendering	94047.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case for comparing the performance of two different approaches to render React components: recursive and non-recursive.

**Script Preparation Code**

The script preparation code consists of four functions:

1. `Greeting`: A simple function that returns a React element with a heading, paragraph, and age.
2. `NonRecursiveRenderer`: A function that uses the `React.createElement` method to render a list of components without recursion.
3. `RecursiveRenderer`: A function that uses the `React.createElement` method to render a list of components recursively.
4. `RenderNonRecursively` and `RenderRecursively`: Two functions that wrap the `NonRecursiveRenderer` and `RecursiveRenderer` functions, respectively, with React DOM rendering.

**Html Preparation Code**

The HTML preparation code includes links to React and React DOM production minified bundles, as well as a `<div>` element with an ID of "root", which is used as the container for the React component.

**Individual Test Cases**

There are two individual test cases:

1. `Recursive rendering`: This test case uses the `RenderRecursively` function to render the `userData` array recursively.
2. `Non recursive rendering`: This test case uses the `RenderNonRecursively` function to render the `userData` array without recursion.

**Comparison of Approaches**

The two approaches differ in how they handle nested data structures:

1. **Recursive Rendering**: This approach uses recursion to traverse the `userData` array and render each component. When a child component is present, it recursively calls itself with the child's data.
2. **Non-Recursive Rendering**: This approach uses a loop to iterate over the `userData` array and render each component. It does not use recursion to handle nested data structures.

**Pros and Cons**

* **Recursive Rendering**:
	+ Pros: Can be more efficient for handling deeply nested data structures, as it avoids unnecessary recursive calls.
	+ Cons: Can lead to performance issues due to excessive function calls and returns.
* **Non-Recursive Rendering**:
	+ Pros: Can be more predictable and easier to optimize, as it uses a loop instead of recursion.
	+ Cons: May not handle deeply nested data structures efficiently.

**Library Usage**

The test case uses the following libraries:

1. React
2. React DOM

These libraries provide the necessary functionality for rendering React components in the browser.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmarking test case that would require specific expertise to understand.

**Other Alternatives**

If you were to rewrite this benchmarking test case, you could consider alternative approaches, such as:

1. Using a different rendering library, such as Virtual DOM or Preact.
2. Implementing custom rendering logic using JavaScript native APIs, such as Web Workers or worker threads.
3. Using a different data structure or algorithm for handling nested data structures.

Keep in mind that the choice of approach will depend on the specific requirements and constraints of your project.

Related benchmarks:

recursive vs non recursive react component rendering (version: 0)

test recursive vs non recursive react component rendering

Comparing performance of: Recursive rendering vs Non recursive rendering

Created: 2 years ago by: Guest

Jump to the latest result

Recursive rendering

Non recursive rendering

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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