Run results for: recursive vs non recursive react component rendering 2

Run details:

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: Chrome 116

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

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

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

Run results for: recursive vs non recursive react component rendering 2

test recursive vs non recursive react component rendering

Recursive rendering

Non recursive rendering

Recursive rendering 2

Non recursive rendering 2