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

React 16, the future & you

Aaaf75447dba53a3de9a5c41d6c2e060?s=47 Jenn Creighton
April 28, 2018
120

React 16, the future & you

Aaaf75447dba53a3de9a5c41d6c2e060?s=128

Jenn Creighton

April 28, 2018
Tweet

Transcript

  1. React 16, the future, & you

  2. Jenn Creighton Senior Front End Engineer @ ClassPass @gurlcode

  3. Agenda V 16 (React) V 16.3 (The Future) Migration (You)

  4. React 16 A full rewrite of React’s reconciliation algorithm

  5. Reconciliation

  6. < 16 >= 16

  7. Fiber

  8. Cannot interrupt The main thread Unit of work Other thread

    work Reconcile + render Commit
  9. 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
  10. Cannot interrupt The main thread Unit of work Other thread

    work Reconcile + render Commit
  11. Sync Async

  12. Unnecessary markup :(

  13. Better… but a bit weird…

  14. TGIF: Thank Goodness for Fragments

  15. The best things have sugar.

  16. Capture errors within boundaries

  17. 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
  18. 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
  19. The Future

  20. Sync Async

  21. Farewell to componentWillMount componentWillReceiveProps componentWillUpdate

  22. Do not panic.

  23. componentWillMount Initializing state

  24. componentWillMount Data fetching SLIDE ERROR: componentDidMount is the correct lifecycle

    method
  25. Hello to getDerivedStateFromProps getSnapshotBeforeUpdate

  26. 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
  27. 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
  28. React Lifecycle 2.0

  29. Old Context API Returning false from shouldComponentUpdate prevented context values

    from updating API felt clunky and out of place
  30. New Context API React.createContext

  31. New Context API Provider Can be dynamically updated:

  32. New Context API Consumer

  33. Why is this so awesome? Context is now a first-class

    API Declarative! Solves shouldComponentUpdate problem Function as a child pattern is flexible & composable
  34. 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.
  35. Solution: If the value is dependent on changing state, you

    can pass that state in instead.
  36. What do I need to do?

  37. NOTHING.

  38. 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
  39. UNSAFE__

  40. react-lifecycles-compat

  41. What if I want to migrate now instead of later?

  42. Strict Mode Opt-in to unsafe lifecycle warnings Double-invokes parts of

    the lifecycle to find side effects Development only; does not affect prod
  43. Thank you!