MeasureThat.net

Run results for: React createElement vs cloneElement

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0
Firefox 136
Windows
Desktop
15 days ago
Test name Executions per second
createElement 638590.5 Ops/sec
cloneElement 551773.3 Ops/sec
HTML Preparation code:
​x
 
1
​
2
​
3
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
4
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
5
​
6
​
7
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
8
​
9
    <div id="root"></div>
10
​
11
    <script type="text/babel">
12
      const container = document.getElementById('root');
13
      const root = ReactDOM.createRoot(container);
14
    </script>
15
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))