Quick Comparison between an Inline Styling and Styled Components

README.md

Context

This was done using storybook with following versions:

• react v16.10.2
• styled-components v4.4.0
• @babel/core v7.5.5
• babel-plugin-styled-components v1.10.6
• antd v3.17.0

There are four stories:

• Built-in button with inline styles
• Ant Button Component with inline styling via style attribute
• Ant Button Component with styles applied by styled-component
• Ant Button Component with styles applied via css attribute (which relies on Babel Macro)

I did 10 consecutive renders (hard reloading the page) for each story in production mode (setting NODE_ENV to production)

Results

Type	Render #1	Render #2	Render #3	Render #4	Render #5	Render #6	Render #7	Render #8	Render #9	Render #10	Average Time	Minimum Time	Maximum Time
Bult-in Button	70.21191406	57.5559082	53.46484375	69.20703125	63.50683594	59.86499023	60.67504883	60.60986328	57.33789063	57.17211914	60.96064453	53.46484375	70.21191406
Ant Button Component w/ Inline Styles	216.1040039	212.4667969	242.8017578	223.3979492	204.9443359	201.8659668	266.9199219	210.6582031	229.0529785	197.9179688	220.6129883	197.9179688	266.9199219
Styled Ant Button Component	243.0859375	231.7409668	365.4179688	288.1789551	263.9812012	293.7749023	287.190918	345.6159668	255.3168945	249.0180664	282.3321777	231.7409668	365.4179688
Ant Button Component w/ CSS Attribute	243.9619141	353.1689453	297.1889648	229.3151855	231.8100586	226.1169434	227.3579102	217.9570313	227.2487793	218.0510254	247.2176758	217.9570313	353.1689453

Observations

Since 1000 components were being rendered, and the difference between inline styles and styled component is more or less 60ms then per component it took 0.06ms, which is arguably negligible.

Benchmarks.stories.jsx

import React from 'react';
import { Button } from 'antd';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';

const stories = storiesOf('Benchmarks', module);

const StyledButton = styled(Button)`
  && {
    display: block;
    margin: 20px;
  }
`;

class Wrap extends React.Component {
  constructor(props) {
    super(props);

    this.list = [];

    for (let i = 0; i < 1000; i++) {
      this.list.push({
        key: Math.random()
          .toString(36)
          .replace(/[^a-z]+/g, ''),
        value: `Button # ${i + 1}`
      });
    }
  }

  UNSAFE_componentWillMount() {
    const { name } = this.props;
    console.time(name);
  }

  componentDidMount() {
    const { name } = this.props;
    console.timeEnd(name);
  }

  render() {
    const { children: callback } = this.props;

    return (
      <React.Fragment>{this.list.map(({ key, value }) => callback(key, value))}</React.Fragment>
    );
  }
}

stories.add('builtin button', () => (
  <Wrap name="builtin-button">
    {(key, value) => (
      <button type="button" key={key} style={{ display: 'block', margin: '20px' }}>
        {value}
      </button>
    )}
  </Wrap>
));

stories.add('inline styles', () => (
  <Wrap name="inline-styles">
    {(key, value) => (
      <Button key={key} style={{ display: 'block', margin: '20px' }}>
        {value}
      </Button>
    )}
  </Wrap>
));

stories.add('styled component', () => (
  <Wrap name="styled-component">
    {(key, value) => (
      <StyledButton key={key} style={{ display: 'block', margin: '20px' }}>
        {value}
      </StyledButton>
    )}
  </Wrap>
));

stories.add('css attribute', () => (
  <Wrap name="css-attribute">
    {(key, value) => (
      <Button key={key} css="display: block !important; margin: 20px">
        {value}
      </Button>
    )}
  </Wrap>
));