A presentation at NationJS in in Washington, DC, USA by Jenn Creighton
React 16, the future, & you
Hello! I’m Jenn. Senior Frontend Engineer @gurlcode
React 16, the future, & you @gurlcode
Dear React Core Team, I love you but please stop releasing new features long enough for me to give this talk. @gurlcode
No, I will not be talking about Hooks. @gurlcode
React 16.0
WTF @gurlcode
Why The Fiber @gurlcode
Reconciliation @gurlcode
Stack Reconcile + update Other thread work @gurlcode
Stack Cannot interrupt Reconcile + update Other thread work @gurlcode
Fiber Unit of work Render + reconcile Other thread work @gurlcode
OMG @gurlcode
requestIdleCallback @gurlcode
Concurrent @gurlcode
Non-blocking @gurlcode
Non-blocking Priority @gurlcode
Fiber Render Render + reconcile Other thread work @gurlcode
Fiber Commit Render + reconcile Other thread work @gurlcode
Fiber Render Render + reconcile Other thread work @gurlcode
Fiber Interruptible Render + reconcile Uninterruptible Other thread work @gurlcode
Time Slicing
React 16.3
Render componentWillMount componentWillReceiveProps componentWillUpdate Commit componentDidMount componentDidUpdate componentWillUnmount shouldComponentUpdate @gurlcode
Fiber Interruptible Render + reconcile Uninterruptible Other thread work @gurlcode
componentWillMount componentWillReceiveProps componentWillUpdate @gurlcode
constructor componentWillReceiveProps componentWillUpdate @gurlcode
constructor getDerivedStateFromProps componentWillUpdate @gurlcode
constructor getDerivedStateFromProps getSnapshotBeforeUpdate @gurlcode
UNSAFE_ @gurlcode
StrictMode @gurlcode
componentWillMount componentDidMount @gurlcode
componentWillMount constructor @gurlcode
Suspense
<Suspense fallback={ } /> @gurlcode
@gurlcode
@gurlcode
const loaded = venues.loaded && reviews.loaded && schedules.loaded && …etc. @gurlcode
Fiber Interruptible Render + reconcile Uninterruptible Other thread work @gurlcode
maxDuration={100} @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
React 16.6
React.lazy @gurlcode
const Image = React.lazy(( ) => import (‘./Image’)); @gurlcode
<Suspense fallback={ <Loader/>}> <Image /> </Suspense> @gurlcode
2019
~early 2019: Hooks ~early - mid 2019: Concurrent Mode ~mid-2019: Suspense for Data Fetching @gurlcode
Server-side Suspense Scheduler React Cache @gurlcode
Fatigue
Excited Exhausted @gurlcode
Me Excited Exhausted @gurlcode
Being curious is really fucking hard. @gurlcode
Learning an unfinished thing is fucking hard. @gurlcode
It is okay. @gurlcode
Focus more on the concepts. Less on the code. @gurlcode
Thank you! 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-dontneed-derived-state.html
for free. You
can too.