renderWrapper = (WrappedComponent) => {
  function SizeMeRenderer(props) {
    const {
      explicitRef,
      className,
      style,
      size,
      disablePlaceholder,
      onSize,
      ...restProps
    } = props

    const noSizeData =
      size == null || (size.width == null && size.height == null)

    const renderPlaceholder = noSizeData && !disablePlaceholder

    const renderProps = {
      className,
      style,
    }

    if (size != null) {
      renderProps.size = size
    }

    const toRender = renderPlaceholder ? (
      <Placeholder className={className} style={style} />
    ) : (
      <WrappedComponent {...renderProps} {...restProps} />
    )

    return <ReferenceWrapper ref={explicitRef}>{toRender}</ReferenceWrapper>
  }

  SizeMeRenderer.displayName = `SizeMeRenderer(${getDisplayName(
    WrappedComponent,
  )})`

  return SizeMeRenderer
}
As we need to maintain a ref on the root node that is rendered within our
SizeMe component we need to wrap our entire render in a sub component.
Without this, we lose the DOM ref after the placeholder is removed from
the render and the actual component is rendered.
It took me forever to figure this out, so tread extra careful on this one!