threepointone

import React from 'react'
import { render } from 'react-dom'

// with fiber, we'll be able to write components that update text deep 
// inside another string without wrapper dom, or rerendering the whole component 

// before
class Lorem extends React.Component {
  state = {
    str: ''

threepointone

<div className={'blue '+ css({ '&&': { color: 'red'}})}>
  '&&' boosts specificity. add as many '&&&'s as you want
</div>,

<div className={css({ '& #meEle': { color: 'red' }})}>
    <div id='myEle'>
       targeting by id
     </div>
</div>
      

threepointone

let rule = css({
  '& .Resizer': {
    // ...
  },
  '& .SplitPane': {
    // ...
  }
  '& .Pane': {
    // ...
  }

threepointone

import { View, Text } from 'react-native'
import { css } from 'glamor-native'

export App = () => {
   <View style={css({ color: 'red' })}>
     <Text>Hello world!</Text>
   </View>
}

threepointone

function ensure(moduleId, fn, done){
  if(__webpack_modules__[moduleId]) {       //eslint-disable-line no-undef
    return done(undefined, __webpack_require__(moduleId))        //eslint-disable-line no-undef
  } 
  fn().then(Module => done(undefined, Module), done)
}


// usage
ensure(require.resolveWeak('./x.js'), 

threepointone

(also know as lies and/or alternative facts)

js

• setImmediate - doesn't set anything immediately, waits for a tick before executing
• setTimeout(fn, n) - never sets the timeout to exactly n
• Math.random() - computers cannot generate random numbers
• Promise - is a lie when rejected
• Array.reduce - accumulates, does not reduce (via @sbmadhav)

threepointone

/* 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 })))
  }

threepointone

// consider the following code 

// a.js

class A extends Component {
  state = { B : undefined }
  componentWillMount(){
    import('./b.js').then(B => 
      this.setState({ B }))    
  }

threepointone

// this is a generic runner for iterators 
// for every yield, it checks to see if any time is remaining 
// on the idle loop, and executes more work if so. 
// else, it queues up for the next idle period 

function go(it, callback){
  requestIdleCallback(deadline => {
    let val = it.next()
    while(!val.done){
      if(deadline.timeRemaining() <= 0){

threepointone

// inifinite scrolling of content without extra wrappers 
const { render, findDOMNode  } = ReactDOMFiber

class App extends React.Component {
  render() {
  // wrap the root element with an Intersection Observer, exposing .observe for children
    return <Intersection>
      <div style={{ height: 200, overflow: 'auto' }}>
        <Page offset={0} count={10} />
      </div>