tkh44

import React from 'react'

export default class extends React.Component {
  constructor () {
    super()
    this.state = { components: undefined }
    this.markers = new WeakMap()
  }

  componentDidMount () {

tkh44

import React from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import listen from 'simple-listen';
import { getTop } from 'fbjs/lib/Scroll';

export default class SidebarAdManager extends React.Component {
  constructor (props) {
    super(props);
    this.state = { stickyAd: {} };

tkh44

import React from 'react'
import styled from 'emotion/react'
import { Motion } from 'data-driven-motion'

import theme from '../../lib/theme'
import Place from '../place'

const Backdrop = styled.div`
  position: fixed;
  left: 0;

tkh44

import '../lib/hydrate'
import React from 'react'

import Box from '../components/box'
import Input from '../components/input'
import Card from '../components/card'
import LeafletMap from '../components/map'
import theme from '../lib/theme'
import images from '../lib/images'
import data from '../boulder.json'

tkh44

import React from 'react'
import styled from 'emotion/react'
import { omit } from 'emotion/lib/utils'
import { space, width, fontSize, color, responsiveStyle } from 'styled-system'

import { baseCss } from './ui'

const defaultExcludedProps = [
  'm',
  'mt',

tkh44

Results:

sorted by rerender time

Solution	Use CSS	Use Inline-Styles	Mount Time (ms)	Rerender time (ms)
react (without styles)	-	-	21.53	49.52
styled-jsx	+	+	37.8	54.77
glam-inline-style	+	+	37.44	56.39
react-css	+	+	33.17	60.98
aphrodite	+	+	42.76	63.24

tkh44

// original code
styled.h1`color:${myColor};`

// Step 1
// emotion creates a function call from
// the tagged template literal
styled('h1', css`color:${myColor};`)

// Step 2
// glam converts the tagged template literal to a

tkh44

// original code
styled.h1`color:${myColor};`

// Step 1
// emotion creates a function call from
// tagged template expression
styled('h1', css`color:${myColor};`)

// Step 2
// glam converts the tagged template expression to a

tkh44

### Keybase proof

I hereby claim:

  * I am tkh44 on github.
  * I am tkh44 (https://keybase.io/tkh44) on keybase.
  * I have a public key ASA_ma7oCXf48V7fiCcoL9YDUaJd5k_Ivzw1tpu9ERkeiAo

To claim this, I am signing this object:

tkh44

// eslint-disable-next-line no-unused-vars
import React from 'react'
import { render } from 'react-dom'

import crate from '../../src'

const pp = obj => JSON.stringify(obj, null, 2)

function Stateless (props) {
  return (