title: What might be the cause of slow react performance?
body: <p>I'm supporting React-based CMS and I got stuck on the performance issue where adding 10 new input fields adds 1 second to the browser processing time. It is not my code, and I have no experience in React. I have experience with profiling and have rough idea how rendering engine might work.</p>
  
  <p>I've hooked the <strong>ReactCompositeComponent._updateRenderedComponent</strong> function to see where the main performance bottleneck is, and the difference seems to be that I am getting a lot of hits. Adding 40 repeater items with calendar inputs causes this difference in performance (the form has to support over 200 inputs, which currently takes 20 seconds):</p>
  
  <ul>
  <li><strong>div</strong>: 250 ms -> 1600 ms, 1300 hits -> 8100 hits</li>
  <li><strong>ConnectedField(props)</strong>: 20 ms -> 370 ms, 70 hits -> 2300 hits</li>
  <li><strong>Calendar()</strong>: 10 ms -> 300 ms, 20 hits -> 1200 hits (but i only added 40 calendar inputs)</li>
  <li><strong>ConnectedFieldArray()</strong>: 30 ms -> 250 ms, 200 hits -> 1300 hits</li>
  </ul>
  
  <p><strong>What might be causing so many hits for just few added elements?</strong></p>
  
  <p>This is the Chrome DevTool profiling graph (click for full size):</p>
  
  <p><a href="https://i.stack.imgur.com/XmA18.png" rel="nofollow noreferrer">
    <img src="https://i.stack.imgur.com/XmA18.png" width="250">
  </a></p>