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

React 16, the future & you (December 4, 2018)

React 16, the future & you (December 4, 2018)

Aaaf75447dba53a3de9a5c41d6c2e060?s=128

Jenn Creighton

December 04, 2018
Tweet

Transcript

  1. React 16, the future, & you

  2. Hello! I’m Jenn. Senior Frontend Engineer @gurlcode

  3. React 16, the future, & you @gurlcode

  4. Dear React Core Team, I love you but please stop

    releasing new features long enough for me to give this talk. @gurlcode
  5. No, I will not be talking about Hooks. @gurlcode

  6. React 16.0

  7. WTF @gurlcode

  8. Why The Fiber @gurlcode

  9. Reconciliation @gurlcode

  10. Stack Other thread work Reconcile + update @gurlcode

  11. Cannot interrupt Stack Other thread work Reconcile + update @gurlcode

  12. Fiber Other thread work Unit of work Render + reconcile

    @gurlcode
  13. OMG @gurlcode

  14. requestIdleCallback @gurlcode

  15. Concurrent @gurlcode

  16. Non-blocking @gurlcode

  17. Non-blocking Priority @gurlcode

  18. Fiber Other thread work Render + reconcile Render @gurlcode

  19. Fiber Other thread work Render + reconcile Commit @gurlcode

  20. Fiber Other thread work Render + reconcile Render @gurlcode

  21. Fiber Other thread work Interruptible Uninterruptible Render + reconcile @gurlcode

  22. Time Slicing

  23. React 16.3

  24. Render Commit componentWillMount componentWillReceiveProps componentWillUpdate shouldComponentUpdate componentDidMount componentDidUpdate componentWillUnmount @gurlcode

  25. Fiber Other thread work Interruptible Uninterruptible Render + reconcile @gurlcode

  26. componentWillMount componentWillReceiveProps componentWillUpdate @gurlcode

  27. constructor componentWillReceiveProps componentWillUpdate @gurlcode

  28. constructor getDerivedStateFromProps componentWillUpdate @gurlcode

  29. constructor getDerivedStateFromProps getSnapshotBeforeUpdate @gurlcode

  30. UNSAFE_ @gurlcode

  31. StrictMode @gurlcode

  32. componentWillMount componentDidMount @gurlcode

  33. componentWillMount constructor @gurlcode

  34. Suspense

  35. <Suspense fallback={ } /> @gurlcode

  36. @gurlcode

  37. @gurlcode

  38. const loaded = venues.loaded && reviews.loaded && schedules.loaded && …etc.

    @gurlcode
  39. Fiber Other thread work Interruptible Uninterruptible Render + reconcile @gurlcode

  40. maxDuration={100} @gurlcode

  41. @gurlcode

  42. @gurlcode

  43. @gurlcode

  44. @gurlcode

  45. React 16.6

  46. React.lazy @gurlcode

  47. const Image = React.lazy(( ) => import (‘./Image’)); @gurlcode

  48. <Suspense fallback={ <Loader/>}> <Image /> </Suspense> @gurlcode

  49. 2019

  50. ~early 2019: Hooks ~early - mid 2019: Concurrent Mode ~mid-2019:

    Suspense for Data Fetching @gurlcode
  51. Server-side Suspense Scheduler React Cache @gurlcode

  52. Fatigue

  53. Excited Exhausted @gurlcode

  54. Excited Exhausted Me @gurlcode

  55. Being curious is really fucking hard. @gurlcode

  56. Learning an unfinished thing is fucking hard. @gurlcode

  57. It is okay. @gurlcode

  58. Focus more on the concepts. Less on the code. @gurlcode

  59. Lin Clark - A Cartoon Intro to Fiber: https://www.youtube.com/watch?v=ZCuYPiUIONs Dan

    Abramov: https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html Andrew Clark - ReactEurope 2017: https://www.youtube.com/watch?v=QW5TE4vrklU Shawn Wang - Fresh Concurrent React: https://github.com/sw-yx/fresh-concurrent-react You Probably Don’t Need Derived State: https://reactjs.org/blog/2018/06/07/you-probably-dont- need-derived-state.html Thank you!