Benchmark: React createElement vs cloneElement

HTML Preparation code:



    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>


    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

	<div id="root"></div>

    <script type="text/babel">
      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
    </script>

Script Preparation code:

const Path = React.createElement('path', {d: "M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h279v60H180v600h600v-279h60v279q0 24-18 42t-42 18H180Zm202-219-42-43 398-398H519v-60h321v321h-60v-218L382-339Z"});

const SVG = React.createElement('svg', {}, Path);

root.render(React.createElement(Element, {width: 100}, SVG));

Tests:

createElement
function Element({children}) { return React.createElement('svg', {width: 24, height:24}, children) } root.render(React.createElement(Element, {width: 100}, Path))
cloneElement
function Element({children}) { return element = React.cloneElement(children, {width: 24, height:24}) } root.render(React.createElement(Element, {width: 100}, SVG))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
cloneElement

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
createElement	638590.5 Ops/sec
cloneElement	551773.3 Ops/sec

Related benchmarks:

React createElement vs cloneElement (version: 2)

Comparing performance of: createElement vs cloneElement

Created: one year ago by: Registered User

Jump to the latest result

createElement

cloneElement

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A