Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React 16, the future & you

Jenn Creighton
April 28, 2018
190

React 16, the future & you

Jenn Creighton

April 28, 2018
Tweet

Transcript

  1. But what is a fiber? A fiber is a JavaScript

    object that contains information about a component, its input and output. At any time, a component instance has at most two fibers that correspond to it: the current fiber, and the work-in-progress fiber. With Fiber, you can: pause work and come back to it later assign priority to different types of work reuse previously completed work abort work if it's no longer needed
  2. You can nest boundaries. Can only catch errors below them

    in the tree Cannot catch errors inside themselves Errors propagate to the next level up
  3. Portals Insert a child into a different location in the

    DOM Still behaves like a normal React child since it still exists in the React tree Useful for modals, popovers, tooltips, etc
  4. getDerivedStateFromProps Replaces componentWillReceiveProps Called after component is instantiated or before

    it receives new props Return an object to update state in response to prop changes Return null to indicate no change to state
  5. getSnapshotBeforeUpdate Replaces componentWillUpdate Called right before the DOM is updated

    Return value is provided as the third argument in componentDidUpdate Useful but often is not needed
  6. Why is this so awesome? Context is now a first-class

    API Declarative! Solves shouldComponentUpdate problem Function as a child pattern is flexible & composable
  7. Any downsides? Values passed to Provider can trigger Consumers to

    re-render. Change the value only when you want consumers to re-render. The above example triggers unnecessary re-renders because a new object is passed into the value prop each time.
  8. You can still use these lifecycle methods. You can still

    use the old Context API. 16.3 16.x+ 17 Allows open source libraries to update Warnings for upcoming deprecations “Deprecate” lifecycles & old context
  9. Strict Mode Opt-in to unsafe lifecycle warnings Double-invokes parts of

    the lifecycle to find side effects Development only; does not affect prod