React 16, the future & you

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

const loaded = venues.loaded && reviews.loaded && schedules.loaded && …etc. @gurlcode

Fiber Interruptible Render + reconcile Uninterruptible Other thread work @gurlcode

maxDuration={100} @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