Everything I Know About React I Learned From Twitter

A presentation at Reactathon in March 2019 in San Francisco, CA, USA by Jenn Creighton

Slide 1

Everything I know about React I learned from Twitter Jenn Creighton (@gurlcode) FrontEnd Engineer @ Rent the RunwaY

Slide 2

React Detective ! @gurlcode

Slide 3

On a dark & stormy night… @gurlcode

Slide 4

@gurlcode

Slide 5

@gurlcode

Slide 6

🔎 @gurlcode

Slide 7

Slide 8

@gurlcode

Slide 9

Welcome! @gurlcode

Slide 10

@gurlcode

Slide 11

@gurlcode

Slide 12

@gurlcode

Slide 13

@gurlcode

Slide 14

<button /> @gurlcode

Slide 15

React.createElement(”button”, null); @gurlcode

Slide 16

React Element { type: button, props: { … } } @gurlcode

Slide 17

@gurlcode

Slide 18

@gurlcode

Slide 19

@gurlcode

Slide 20

@gurlcode

Slide 21

@gurlcode

Slide 22

@gurlcode

Slide 23

@gurlcode

Slide 24

Fiber { tag child sibling return … } @gurlcode

Slide 25

Fiber { Fiber type tag child sibling return … } @gurlcode

Slide 26

Fiber { Child fiber Fiber type tag child sibling return … } @gurlcode

Slide 27

Fiber { Child fiber Fiber type tag child sibling return … Sibling fiber } @gurlcode

Slide 28

Fiber { Child fiber Parent fiber Fiber type tag child sibling return … Sibling fiber } @gurlcode

Slide 29

@gurlcode

Slide 30

reactInternalInstance @gurlcode

Slide 31

@gurlcode

Slide 32

@gurlcode

Slide 33

@gurlcode

Slide 34

@gurlcode

Slide 35

@gurlcode

Slide 36

div h1 C div one-way two-way @gurlcode

Slide 37

@gurlcode

Slide 38

ReactDOM.unstable_createRoot(node) @gurlcode

Slide 39

new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode

Slide 40

createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode

Slide 41

createHostRootFiber createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode

Slide 42

HostRoot createFiber fiber { tag: HostRoot } createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode

Slide 43

HostRoot createFiber root.current = fiber new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode

Slide 44

HostRoot createFiber new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode

Slide 45

HostRoot createFiber this._internalRoot = root ReactDOM.unstable_createRoot(node) @gurlcode

Slide 46

HostRoot createFiber root = ReactRoot @gurlcode

Slide 47

@gurlcode

Slide 48

this._InternalRoot { current: { tag: HostRoot } … } @gurlcode

Slide 49

HostRoot root.render( ReactElement ) @gurlcode

Slide 50

HostRoot ReactRoot.render( ReactElement ) @gurlcode

Slide 51

HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode

Slide 52

HostRoot update = { element: element } ReactRoot.render( ReactElement ) @gurlcode

Slide 53

HostRoot enqueueUpdate(update) scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode

Slide 54

Fiber { alternate tag child sibling list of state updates return updateQueue } @gurlcode

Slide 55

HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode

Slide 56

HostRoot scheduleWork( ) scheduleWork scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode

Slide 57

HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode

Slide 58

HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode

Slide 59

@gurlcode

Slide 60

HostRoot performWork @gurlcode

Slide 61

HostRoot renderRoot performWork @gurlcode

Slide 62

HostRoot createWorkInProgress(current) renderRoot performWork @gurlcode

Slide 63

HostRoot workInProgress = current.alternate renderRoot performWork @gurlcode

Slide 64

Fiber { Pooled fiber alternate tag child sibling return … } @gurlcode

Slide 65

@gurlcode

Slide 66

@gurlcode

Slide 67

HostRoot workInProgress === null renderRoot performWork @gurlcode

Slide 68

HostRoot createFiber(current) workInProgress = current.alternate renderRoot performWork @gurlcode

Slide 69

HostRoot current.alternate = workInProgress renderRoot performWork @gurlcode

Slide 70

HostRoot createWorkInProgress(current) renderRoot performWork @gurlcode

Slide 71

HostRoot nextUnitOfWork = workInProgress performWork @gurlcode

Slide 72

HostRoot workLoop nextUnitOfWork = workInProgress performWork @gurlcode

Slide 73

@gurlcode

Slide 74

fiber @gurlcode

Slide 75

HostRoot workLoop @gurlcode

Slide 76

HostRoot performUnitOfWork workLoop @gurlcode

Slide 77

HostRoot beginWork performUnitOfWork workLoop @gurlcode

Slide 78

HostRoot updateHostRoot beginWork performUnitOfWork workLoop @gurlcode

Slide 79

HostRoot processUpdateQueue updateHostRoot beginWork performUnitOfWork workLoop @gurlcode

Slide 80

HostRoot newState = { element: element } updateHostRoot beginWork performUnitOfWork workLoop @gurlcode

Slide 81

HostRoot fiber.memoizedState = newState updateHostRoot beginWork performUnitOfWork workLoop @gurlcode

Slide 82

Fiber { alternate tag child sibling return memoizedState … current state } @gurlcode

Slide 83

HostRoot nextChild = fiber.memoizedState.element beginWork performUnitOfWork workLoop @gurlcode

Slide 84

HostRoot reconcileChildFibers(child, nextChild) nextChild = fiber.memoizedState.element beginWork performUnitOfWork workLoop @gurlcode

Slide 85

HostRoot workInProgress.child = createFiber( ) div nextChild = fiber.memoizedState.element beginWork performUnitOfWork workLoop @gurlcode

Slide 86

HostRoot div return workInProgress.child beginWork performUnitOfWork workLoop @gurlcode

Slide 87

HostRoot div return workInProgress.child performUnitOfWork workLoop @gurlcode

Slide 88

HostRoot div return workInProgress.child workLoop @gurlcode

Slide 89

HostRoot div nextUnitOfWork = performUnitWork @gurlcode

Slide 90

HostRoot div nextUnitOfWork !== null @gurlcode

Slide 91

HostRoot div workLoop @gurlcode

Slide 92

HostRoot div performUnitOfWork workLoop @gurlcode

Slide 93

HostRoot div beginWork performUnitOfWork workLoop @gurlcode

Slide 94

HostRoot div updateHostComponent beginWork performUnitOfWork workLoop @gurlcode

Slide 95

HostRoot div nextChild = fiber.pendingProps.children beginWork performUnitOfWork workLoop @gurlcode

Slide 96

Fiber { alternate tag child sibling return memoizedState pendingProps … waiting to be applied } @gurlcode

Slide 97

HostRoot reconcileChildFibers(child, nextChild) div updateHostComponent beginWork performUnitOfWork workLoop @gurlcode

Slide 98

reconcileChildrenArray reconcileChildFibers HostRoot div updateHostComponent beginWork performUnitOfWork workLoop @gurlcode

Slide 99

HostRoot child = createFiber( ) reconcileChildFibers div updateHostComponent h1 beginWork performUnitOfWork workLoop @gurlcode

Slide 100

HostRoot child.sibling = createFiber( ) reconcileChildFibers div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 101

HostRoot return child reconcileChildFibers div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 102

HostRoot workInProgress.child = child div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 103

HostRoot div return workInProgress.child h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 104

HostRoot div h1 C return workInProgress.child performUnitOfWork workLoop @gurlcode

Slide 105

HostRoot div h1 C return workInProgress.child workLoop @gurlcode

Slide 106

HostRoot div h1 C nextUnitOfWork = performUnitWork @gurlcode

Slide 107

HostRoot div h1 C nextUnitOfWork !== null @gurlcode

Slide 108

HostRoot div h1 C workLoop @gurlcode

Slide 109

HostRoot div h1 C performUnitOfWork workLoop @gurlcode

Slide 110

HostRoot div h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 111

HostRoot div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 112

HostRoot reconcileChildFibers div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 113

HostRoot workInProgress.child = null div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 114

HostRoot div return null h1 C beginWork performUnitOfWork workLoop @gurlcode

Slide 115

HostRoot div h1 C return null performUnitOfWork workLoop @gurlcode

Slide 116

HostRoot div h1 C nextUnitOfWork === null workLoop @gurlcode

Slide 117

HostRoot div h1 C completeUnitOfWork performUnitOfWork workLoop @gurlcode

Slide 118

HostRoot div completeWork h1 C completeUnitOfWork return performUnitOfWork workInProgress.child workLoop @gurlcode

Slide 119

HostRoot div return fiber.sibling | | fiber.return h1 C completeUnitOfWork return performUnitOfWork workInProgress.child workLoop @gurlcode

Slide 120

HostRoot div h1 C return fiber.sibling return performUnitOfWork workInProgress.child workLoop @gurlcode

Slide 121

HostRoot div h1 C return fiber.sibling return return workInProgress.child fiber.sibling workLoop @gurlcode

Slide 122

HostRoot div h1 C return fiber.sibling nextUnitOfWork = performUnitOfWork return workInProgress.child nextUnitOfWork = performUnitOfWork @gurlcode

Slide 123

HostRoot div h1 C @gurlcode

Slide 124

HostRoot div h1 C div @gurlcode

Slide 125

HostRoot div h1 C div @gurlcode

Slide 126

HostRoot div h1 C div @gurlcode

Slide 127

HostRoot div h1 C div @gurlcode

Slide 128

HostRoot div h1 C div @gurlcode

Slide 129

@gurlcode

Slide 130

Slide 131

@gurlcode

Slide 132

@gurlcode

Slide 133

@gurlcode

Slide 134

@gurlcode

Slide 135

Component.prototype.setState @gurlcode

Slide 136

HostRoot div h1 C div enqueueSetState(fiber, update) @gurlcode

Slide 137

HostRoot div h1 enqueueUpdate(fiber, update) C div enqueueSetState(fiber, update) @gurlcode

Slide 138

HostRoot div h1 C div enqueueSetState(fiber, update) @gurlcode

Slide 139

HostRoot div h1 scheduleWork( ) C div enqueueSetState(fiber, update) @gurlcode

Slide 140

HostRoot div h1 C div enqueueSetState(fiber, update) @gurlcode

Slide 141

HostRoot div h1 C div performWork @gurlcode

Slide 142

HostRoot div h1 renderRoot C div performWork @gurlcode

Slide 143

HostRoot div h1 C workInProgress = current.alternate renderRoot div performWork @gurlcode

Slide 144

HostRoot div h1 nextUnitOfWork = workInProgress C div performWork @gurlcode

Slide 145

HostRoot div h1 C workLoop nextUnitOfWork = workInProgress div performWork @gurlcode

Slide 146

HostRoot div h1 C div workLoop @gurlcode

Slide 147

HostRoot div h1 performUnitOfWork C div workLoop @gurlcode

Slide 148

HostRoot div h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 149

HostRoot div h1 C oldProps !== newProps performUnitOfWork div workLoop @gurlcode

Slide 150

HostRoot div h1 C return workInProgress.child performUnitOfWork div workLoop @gurlcode

Slide 151

HostRoot div h1 return workInProgress.child C div workLoop @gurlcode

Slide 152

HostRoot div h1 C div workLoop @gurlcode

Slide 153

HostRoot div h1 C div @gurlcode

Slide 154

HostRoot div h1 C div @gurlcode

Slide 155

HostRoot div h1 C div workLoop @gurlcode

Slide 156

HostRoot div h1 performUnitOfWork C div workLoop @gurlcode

Slide 157

HostRoot div h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 158

HostRoot div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 159

HostRoot updateClassInstance div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 160

HostRoot processUpdateQueue updateClassInstance div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 161

HostRoot fiber.memoizedState = newState updateClassInstance div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 162

HostRoot div instance.state = fiber.memoizedState h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 163

HostRoot div nextChild = instance.render( ) h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 164

HostRoot reconcileChildFibers div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 165

HostRoot fiber.effectTag = Update div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 166

Fiber { work to be done alternate tag child sibling return memoizedState pendingProps effectTag … } @gurlcode

Slide 167

HostRoot return workInProgress.child div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 168

HostRoot div return workInProgress.child h1 C beginWork performUnitOfWork div workLoop @gurlcode

Slide 169

HostRoot div h1 C return workInProgress.child performUnitOfWork div workLoop @gurlcode

Slide 170

HostRoot div h1 return workInProgress.child C div workLoop @gurlcode

Slide 171

HostRoot div h1 C div workLoop @gurlcode

Slide 172

HostRoot div h1 C div @gurlcode

Slide 173

div h1 C div @gurlcode

Slide 174

f f f f @gurlcode

Slide 175

VDOM @gurlcode

Slide 176

@gurlcode

Slide 177

fn fn fn @gurlcode

Slide 178

When a function is called, a new stack frame is added fn fn fn fn @gurlcode

Slide 179

Fibers are virtual stack frames fiber fiber fiber fiber @gurlcode

Slide 180

@gurlcode

Slide 181

Thank You! Huge shoutout to the React core team 💛 @gurlcode