Run results for: React createElement vs cloneElement

Run details:

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

Browser: Firefox 136

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

createElement

639K/s

cloneElement

552K/s

View exact numbers

Test name	Executions per second
✓ createElement	638,590 Ops/sec
cloneElement	551,773 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))