React 16, the future & you

Slide 1

React 16, the future, & you

Slide 2

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

Slide 3

React 16, the future, & you @gurlcode

Slide 4

Dear React Core Team, I love you but please stop releasing new features long enough for me to give this talk. @gurlcode

Slide 5

No, I will not be talking about Hooks. @gurlcode

Slide 6

React 16.0

Slide 7

WTF @gurlcode

Slide 8

Why The Fiber @gurlcode

Slide 9

Reconciliation @gurlcode

Slide 10

Stack Reconcile + update Other thread work @gurlcode

Slide 11

Stack Cannot interrupt Reconcile + update Other thread work @gurlcode

Slide 12

Fiber Unit of work Render + reconcile Other thread work @gurlcode

Slide 13

OMG @gurlcode

Slide 14

requestIdleCallback @gurlcode

Slide 15

Concurrent @gurlcode

Slide 16

Non-blocking @gurlcode

Slide 17

Non-blocking Priority @gurlcode

Slide 18

Fiber Render Render + reconcile Other thread work @gurlcode

Slide 19

Fiber Commit Render + reconcile Other thread work @gurlcode

Slide 20

Fiber Render Render + reconcile Other thread work @gurlcode

Slide 21

Fiber Interruptible Render + reconcile Uninterruptible Other thread work @gurlcode

Slide 22

Time Slicing

Slide 23

React 16.3

Slide 24

Render componentWillMount componentWillReceiveProps componentWillUpdate Commit componentDidMount componentDidUpdate componentWillUnmount shouldComponentUpdate @gurlcode

Slide 25

Fiber Interruptible Render + reconcile Uninterruptible Other thread work @gurlcode

Slide 26

componentWillMount componentWillReceiveProps componentWillUpdate @gurlcode

Slide 27

constructor componentWillReceiveProps componentWillUpdate @gurlcode

Slide 28

constructor getDerivedStateFromProps componentWillUpdate @gurlcode

Slide 29

constructor getDerivedStateFromProps getSnapshotBeforeUpdate @gurlcode

Slide 30

UNSAFE_ @gurlcode

Slide 31

StrictMode @gurlcode

Slide 32

componentWillMount componentDidMount @gurlcode

Slide 33

componentWillMount constructor @gurlcode

Slide 34

Suspense

Slide 35

<Suspense fallback={ } /> @gurlcode

Slide 36

@gurlcode

Slide 37

@gurlcode

Slide 38

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

Slide 39

Fiber Interruptible Render + reconcile Uninterruptible Other thread work @gurlcode

Slide 40

maxDuration={100} @gurlcode

Slide 41

@gurlcode

Slide 42

@gurlcode

Slide 43

@gurlcode

Slide 44

@gurlcode

Slide 45

React 16.6

Slide 46

React.lazy @gurlcode

Slide 47

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

Slide 48

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

Slide 49

2019

Slide 50

~early 2019: Hooks ~early - mid 2019: Concurrent Mode ~mid-2019: Suspense for Data Fetching @gurlcode

Slide 51

Server-side Suspense Scheduler React Cache @gurlcode

Slide 52

Fatigue

Slide 53

Excited Exhausted @gurlcode

Slide 54

Me Excited Exhausted @gurlcode

Slide 55

Being curious is really fucking hard. @gurlcode

Slide 56

Learning an unfinished thing is fucking hard. @gurlcode

Slide 57

It is okay. @gurlcode

Slide 58

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

Slide 59

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