Run results for: React createElement vs cloneElement

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser: Chrome 134

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

createElement

1.5M/s

cloneElement

1.5M/s

View exact numbers

Test name	Executions per second
✓ createElement	1,528,216 Ops/sec
cloneElement	1,520,314 Ops/sec

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