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

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
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!