styled-components (300ms) vs plain className (100ms)

benchmark.html

<style type="text/css">
  .block {
    border: 1px solid red;
    min-height: 1px;
  }
</style>

<div id="mount"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/2.1.1/styled-components.min.js"></script>

<script>

  var Block = styled.default.div`
    border: 1px solid red;
    min-height: 1px;
  `;

  var Plain = function(props) {
    return React.createElement('div', Object.assign({}, props, {
      className: 'block',
    }));
  };

  var data = Array.apply(null, new Array(1000));

  var makeComplexComponent = function(Base) {
    var ComplexContent = function() {
      return React.createElement(Base, null, [
        React.createElement(Base, null, [
          React.createElement(Base),
          React.createElement(Base),
          React.createElement(Base),
        ]),
        React.createElement(Base, null, [
          React.createElement(Base),
          React.createElement(Base),
          React.createElement(Base),
        ]),
      ]);
    }

    return function(props) {
      return React.createElement('div', null, [
        props.type,
        data.map(function() {
          return React.createElement(ComplexContent);
        })
      ]);
    };
  };

  var StyledComponent = makeComplexComponent(Block);
  var PlainComponent = makeComplexComponent(Plain);

  var type = location.hash;
  var CurrentComponent =  location.hash === '#plain' ? PlainComponent : StyledComponent;
  location.hash = location.hash === '#plain' ? '#styled' : '#plain';

  console.time('render');
  ReactDOM.render(React.createElement(CurrentComponent, { type: type }), document.getElementById('mount'));
  console.timeEnd('render');
</script>