Run results for: recursive vs non recursive react component rendering

Run details:

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

Browser: Chrome 120

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Recursive rendering	85575.1 Ops/sec
Non recursive rendering	47435.1 Ops/sec

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'))

Run results for: recursive vs non recursive react component rendering

test recursive vs non recursive react component rendering

Recursive rendering

Non recursive rendering