React 16.3.2 New Examples

react-16.3.2-example.js

// context

const UserContext = React.createContext({}) // {} is default value

// imagine this being a deeper child
const Page = props => <ContextProvider.Consumer>
  {(user) => <p>{user.name}</p>}
</ContextProvider.Consumer>

class App extends Component {
  state = {
    user: {
      id: 1,
      name: 'guy'
    }
  }

  render () {
    return <UserContext.Provider value={this.state.user}>
      <Page />
    </UserContext.Provider>
  }
}

// Refs

class AutoFocusInput extends Component {
  constructor (props) {
    super(props)
    this.input = React.createRef()
  }

  componentDidMount () {
    this.input.current.focus()
  }

  render () {
    return <input 
      ref={this.input} 
      value={this.props.value} 
      onChange={this.props.onChange)
    />
  }
}

// getDerivedStateFromProps (replace componentWillReceiveProps!)

class SomeComp extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  // ** Arbitrary example. Wouldn't recommend using this just for this in real app **
  //
  // set state from next props if state/props are different
  // else no update needed.
  //
  // This is ran during constructor initiatlization
  // and when componentWilReceiveProps would have been ran
  //
  // Notice this is a static property, so there is no access to `this` instances
  // of the class.
  // The return value must be your next state, or null for no state update.
  static getDerivedStateFromProps (nextProps, prevState) {
    return (prevState.value !== nextProps.value)
      ? { value: nextProps.value }
      : null
  }

  render () {
    return (
      <input value={this.state.value} />
    )
  }
}

// getSnapshotBeforeUpdate

class ScrollThing extends Component {
  constructor (props) {
    super(props)
    this.listRef = React.createRef()
  }

  // replaces componentWillUpdate functionality
  getSnapshotBeforeUpdate (prevProps, prevState) {
    // capture scroll position if adding item
    // return value gets called as 3rd arg in componentDidUpdate
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current
      return list.scrollHeight - list.scrollTop
    }
  }

  componentDidUpdate (prevProps, prevState, snapshot) {
    // set scroll height 
    if (snapshot !== null) {
      const list = this.listRef.current
      list.scrollTop = list.scrollHeight - snapshot
    }
  }

  render () {
    return <div ref={this.listRef}>{this.props.children}</div>
  }
}