For loop rendering

Benchmark created on

Preparation HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js" />

<div id="root"></div>

Setup

const rootEl = document.getElementById('root');
const container = ReactDOM.createRoot(rootEl);

let data = new Array(100).fill();

data = data.map((el,i) => (
	{
		count: Math.round(Math.random()*100),
		label: `Filter ${i}`,
		value: `some-filter-value-${i}`,
	}
));

Test runner

Ready to run.

Testing in
TestOps/sec
Loop in parent
const Child = ({ count, label, value }) => (
	<label>
		<span>{label} ({count})</span>
		<input type="checkbox" value={value} name="" />
	</label>
);

const Parent = () => {
	<>
		{data.map(item => <Child {...item} />)}
	</>
}

const App = () => (
	<Parent />
);
ready
Loop in sub component
const Child = ({ data }) => (
	<>
		{data.map(
			({ count, label, value }) => (
				<label>
					<span>{label} ({count})</span>
					<input type="checkbox" value={value} name="" />
				</label>
			)
		)}
	</>
);

const Parent = () => (
	<Child data={data} />
);

const App = () => (
	<Parent />
);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.