deferred render with react fiber

deferred.js

/* global React, ReactDOMFiber */
/* @jsx deferElement */
const { render, unstable_deferredUpdates  } = ReactDOMFiber

class Deferred extends React.Component {
  state = { next: false }
  componentDidMount() {
    unstable_deferredUpdates(() =>
      this.setState(state => ({ next: true })))
  }
  render(){
    return this.state.next ? this.props.children : null
  }
}

function deferElement(Type, allProps, children){
  if(!allProps || !allProps.defer){
    return React.createElement(Type, allProps, children)    
  }
  
  let { defer, ...props } = allProps
    return React.createElement(Deferred, {}, 
      React.createElement(Type, props, children))    
}

render(
  <FancyComponent defer> 
    this component was rendered lazily! 
  </FancyComponent>, 
  document.getElementById('app'))