Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
2 years ago
by:
Guest
Jump to the latest result
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>
Run tests (4)
Previous results
Fork
Test case name
Result
Recursive rendering
Non recursive rendering
Recursive rendering 2
Non recursive rendering 2
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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.
Related benchmarks:
memo vs no-memo vs incorrect- memo
memo vs no-memo vs incorrect- memo 17 prod
Component creation complexity
recursive vs non recursive react component rendering
Comments
Confirm delete:
Do you really want to delete benchmark?