Benchmark: recursive vs non recursive react component rendering 2

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'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{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'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{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'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]},{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'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{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'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{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'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'},{name: 'a', age: '2'}]},{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'))
Recursive rendering 2
const userData = [ { name: 'a', age: '2' }, { name: 'a', age: '2', child: [ { name: 'a', age: '2' }, { name: 'awrgw', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrgwrgwr', age: '2' }, { name: 'awg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'wra', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { 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: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'wrga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awr', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', 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: 'd', age: '2' }, { name: 'a', age: '2' }, { name: 'adaf', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'adfa', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'dafgtea', age: '2' }, { name: 'a', age: '2' }, { name: 'fga', age: '2' }, { name: 'a', age: '2' }, { name: 'gwra', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrg', age: '2' }, ], }, { name: 'a', age: '2', child: [ { name: 'a', age: '2' }, { name: 'awrgw', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrgwrgwr', age: '2' }, { name: 'awg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'wra', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { 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: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'wrga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awr', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', 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: 'd', age: '2' }, { name: 'a', age: '2' }, { name: 'adaf', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'adfa', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'dafgtea', age: '2' }, { name: 'a', age: '2' }, { name: 'fga', age: '2' }, { name: 'a', age: '2' }, { name: 'gwra', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrg', age: '2' }, ], }, ]; ReactDOM.render(React.createElement(RenderRecursively, {userData: userData}), document.getElementById('root'))
Non recursive rendering 2
const userData = [ { name: 'a', age: '2' }, { name: 'a', age: '2', child: [ { name: 'a', age: '2' }, { name: 'awrgw', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrgwrgwr', age: '2' }, { name: 'awg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'wra', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { 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: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'wrga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awr', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', 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: 'd', age: '2' }, { name: 'a', age: '2' }, { name: 'adaf', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'adfa', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'dafgtea', age: '2' }, { name: 'a', age: '2' }, { name: 'fga', age: '2' }, { name: 'a', age: '2' }, { name: 'gwra', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrg', age: '2' }, ], }, { name: 'a', age: '2', child: [ { name: 'a', age: '2' }, { name: 'awrgw', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrgwrgwr', age: '2' }, { name: 'awg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'wra', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { 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: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'wrga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awr', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', 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: 'd', age: '2' }, { name: 'a', age: '2' }, { name: 'adaf', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'adfa', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'dafgtea', age: '2' }, { name: 'a', age: '2' }, { name: 'fga', age: '2' }, { name: 'a', age: '2' }, { name: 'gwra', age: '2' }, ], }, { name: 'a', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'arwg', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'rwga', age: '2' }, { name: 'awrgwrg', age: '2', child: [ { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'wrga', age: '2' }, { name: 'a', age: '2' }, { name: 'rwga', age: '2' }, { name: 'a', age: '2' }, { name: 'arw', age: '2' }, { name: 'arwg', age: '2' }, { name: 'arwg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'awrg', age: '2' }, { name: 'arg', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, { name: 'a', age: '2' }, ], }, { name: 'awrg', 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
Recursive rendering 2
Non recursive rendering 2

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

It seems like you're trying to benchmark the performance of your React application, specifically comparing the performance of recursive and non-recursive rendering.

The benchmark data you provided shows that both recursive and non-recursive rendering have different execution rates:

* Recursive rendering: 18621.775390625 executions per second
* Non-recursive rendering: 9037.037109375 executions per second

It's generally recommended to avoid deep nesting in React components, as it can lead to performance issues and even cause the browser to crash.

However, if you need to render complex data structures recursively for a specific use case, it's essential to optimize your code to minimize the overhead of recursive rendering. In this case, using `React.memo` or other optimization techniques might help improve performance.

Here are some general tips to improve the performance of recursive rendering:

1.  **Avoid unnecessary re-renders**: Use `useMemo` or `useCallback` to memoize data and functions that don't change frequently.
2.  **Optimize component trees**: Use `React.PureComponent` or `React.memo` to reduce the number of components in your tree, which can lead to fewer render cycles.
3.  **Use efficient rendering techniques**: Consider using techniques like lazy loading, caching, or batched updates to minimize the amount of data being rendered at once.

Keep in mind that each scenario is unique, and there's no one-size-fits-all solution for optimizing performance. You might need to experiment with different approaches to find what works best for your specific use case.

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/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Recursive rendering	60487.7 Ops/sec
Non recursive rendering	9037.0 Ops/sec
Recursive rendering 2	18621.8 Ops/sec
Non recursive rendering 2	744.7 Ops/sec

Related benchmarks:

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

test recursive vs non recursive react component rendering

Comparing performance of: Recursive rendering vs Non recursive rendering vs Recursive rendering 2 vs Non recursive rendering 2

Created: one year ago by: Guest

Jump to the latest result

Recursive rendering

Non recursive rendering

Recursive rendering 2

Non recursive rendering 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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