Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Jenn Creighton (@gurlcode) FrontEnd Engineer @ Rent the RunwaY Everything I know about React I learned from Twitter
Slide 2
Slide 2 text
React Detective ! @gurlcode
Slide 3
Slide 3 text
On a dark & stormy night… @gurlcode
Slide 4
Slide 4 text
@gurlcode
Slide 5
Slide 5 text
@gurlcode
Slide 6
Slide 6 text
@gurlcode
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
@gurlcode
Slide 9
Slide 9 text
Welcome! @gurlcode
Slide 10
Slide 10 text
@gurlcode
Slide 11
Slide 11 text
@gurlcode
Slide 12
Slide 12 text
@gurlcode
Slide 13
Slide 13 text
@gurlcode
Slide 14
Slide 14 text
@gurlcode
Slide 15
Slide 15 text
@gurlcode React.createElement(”button”, null);
Slide 16
Slide 16 text
{ type: button, props: { … } } React Element @gurlcode
Slide 17
Slide 17 text
@gurlcode
Slide 18
Slide 18 text
@gurlcode
Slide 19
Slide 19 text
@gurlcode
Slide 20
Slide 20 text
@gurlcode
Slide 21
Slide 21 text
@gurlcode
Slide 22
Slide 22 text
@gurlcode
Slide 23
Slide 23 text
@gurlcode
Slide 24
Slide 24 text
{ tag child sibling return … } Fiber @gurlcode
Slide 25
Slide 25 text
Fiber type @gurlcode Fiber { tag child sibling return … }
Slide 26
Slide 26 text
@gurlcode Fiber Child fiber { tag child sibling return … } Fiber type
Slide 27
Slide 27 text
@gurlcode Fiber Child fiber Sibling fiber { tag child sibling return … } Fiber type
Slide 28
Slide 28 text
@gurlcode Fiber Child fiber Sibling fiber Parent fiber { tag child sibling return … } Fiber type
Slide 29
Slide 29 text
@gurlcode
Slide 30
Slide 30 text
reactInternalInstance @gurlcode
Slide 31
Slide 31 text
@gurlcode
Slide 32
Slide 32 text
@gurlcode
Slide 33
Slide 33 text
@gurlcode
Slide 34
Slide 34 text
@gurlcode
Slide 35
Slide 35 text
@gurlcode
Slide 36
Slide 36 text
@gurlcode one-way two-way div h1 C div
Slide 37
Slide 37 text
@gurlcode
Slide 38
Slide 38 text
@gurlcode ReactDOM.unstable_createRoot(node)
Slide 39
Slide 39 text
@gurlcode new ReactRoot ReactDOM.unstable_createRoot(node)
Slide 40
Slide 40 text
@gurlcode createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node)
Slide 41
Slide 41 text
@gurlcode createFiberRoot createHostRootFiber new ReactRoot ReactDOM.unstable_createRoot(node)
Slide 42
Slide 42 text
@gurlcode createFiberRoot createFiber fiber { tag: HostRoot } new ReactRoot ReactDOM.unstable_createRoot(node) HostRoot
Slide 43
Slide 43 text
@gurlcode root.current = fiber createFiber new ReactRoot ReactDOM.unstable_createRoot(node) HostRoot
Slide 44
Slide 44 text
@gurlcode createFiber new ReactRoot ReactDOM.unstable_createRoot(node) HostRoot
Slide 45
Slide 45 text
@gurlcode createFiber this._internalRoot = root ReactDOM.unstable_createRoot(node) HostRoot
Slide 46
Slide 46 text
@gurlcode createFiber root = ReactRoot HostRoot
Slide 47
Slide 47 text
@gurlcode
Slide 48
Slide 48 text
{ current: { tag: HostRoot } … } @gurlcode this._InternalRoot
Slide 49
Slide 49 text
@gurlcode root.render( ReactElement ) HostRoot
Slide 50
Slide 50 text
@gurlcode ReactRoot.render( ReactElement ) HostRoot
Slide 51
Slide 51 text
@gurlcode scheduleRootUpdate(current, element) HostRoot ReactRoot.render( ReactElement )
Slide 52
Slide 52 text
@gurlcode HostRoot ReactRoot.render( ReactElement ) update = { element: element }
Slide 53
Slide 53 text
@gurlcode enqueueUpdate(update) HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
Slide 54
Slide 54 text
{ alternate tag child sibling return updateQueue } @gurlcode Fiber list of state updates
Slide 55
Slide 55 text
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
Slide 56
Slide 56 text
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleWork( ) scheduleWork scheduleRootUpdate(current, element)
Slide 57
Slide 57 text
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
Slide 58
Slide 58 text
@gurlcode HostRoot ReactRoot.render( ReactElement ) scheduleRootUpdate(current, element)
Slide 59
Slide 59 text
@gurlcode
Slide 60
Slide 60 text
@gurlcode HostRoot performWork
Slide 61
Slide 61 text
@gurlcode renderRoot HostRoot performWork
Slide 62
Slide 62 text
@gurlcode renderRoot HostRoot performWork createWorkInProgress(current)
Slide 63
Slide 63 text
@gurlcode renderRoot HostRoot performWork workInProgress = current.alternate
Slide 64
Slide 64 text
{ alternate tag child sibling return … } Pooled fiber @gurlcode Fiber
Slide 65
Slide 65 text
@gurlcode
Slide 66
Slide 66 text
@gurlcode
Slide 67
Slide 67 text
@gurlcode renderRoot HostRoot performWork workInProgress === null
Slide 68
Slide 68 text
@gurlcode renderRoot HostRoot performWork workInProgress = current.alternate createFiber(current)
Slide 69
Slide 69 text
@gurlcode renderRoot HostRoot performWork current.alternate = workInProgress
Slide 70
Slide 70 text
@gurlcode renderRoot HostRoot performWork createWorkInProgress(current)
Slide 71
Slide 71 text
@gurlcode HostRoot performWork nextUnitOfWork = workInProgress
Slide 72
Slide 72 text
@gurlcode nextUnitOfWork = workInProgress HostRoot performWork workLoop
Slide 73
Slide 73 text
@gurlcode
Slide 74
Slide 74 text
fiber @gurlcode
Slide 75
Slide 75 text
@gurlcode HostRoot workLoop
Slide 76
Slide 76 text
@gurlcode HostRoot performUnitOfWork workLoop
Slide 77
Slide 77 text
@gurlcode HostRoot workLoop performUnitOfWork beginWork
Slide 78
Slide 78 text
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot
Slide 79
Slide 79 text
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot processUpdateQueue
Slide 80
Slide 80 text
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot newState = { element: element }
Slide 81
Slide 81 text
@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot fiber.memoizedState = newState
Slide 82
Slide 82 text
{ alternate tag child sibling return memoizedState … } @gurlcode Fiber current state
Slide 83
Slide 83 text
@gurlcode HostRoot workLoop performUnitOfWork beginWork nextChild = fiber.memoizedState.element
Slide 84
Slide 84 text
@gurlcode HostRoot workLoop performUnitOfWork beginWork reconcileChildFibers(child, nextChild) nextChild = fiber.memoizedState.element
Slide 85
Slide 85 text
@gurlcode HostRoot performUnitOfWork beginWork workInProgress.child = createFiber( ) div workLoop nextChild = fiber.memoizedState.element
Slide 86
Slide 86 text
@gurlcode HostRoot performUnitOfWork beginWork div workLoop return workInProgress.child
Slide 87
Slide 87 text
@gurlcode HostRoot performUnitOfWork div workLoop return workInProgress.child
Slide 88
Slide 88 text
@gurlcode HostRoot div workLoop return workInProgress.child
Slide 89
Slide 89 text
@gurlcode HostRoot nextUnitOfWork = performUnitWork div
Slide 90
Slide 90 text
@gurlcode HostRoot nextUnitOfWork !== null div
Slide 91
Slide 91 text
@gurlcode HostRoot workLoop div
Slide 92
Slide 92 text
@gurlcode HostRoot div performUnitOfWork workLoop
Slide 93
Slide 93 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork
Slide 94
Slide 94 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent
Slide 95
Slide 95 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork nextChild = fiber.pendingProps.children
Slide 96
Slide 96 text
{ alternate tag child sibling return memoizedState pendingProps … } @gurlcode Fiber waiting to be applied
Slide 97
Slide 97 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers(child, nextChild)
Slide 98
Slide 98 text
@gurlcode HostRoot div reconcileChildrenArray workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers
Slide 99
Slide 99 text
@gurlcode HostRoot div child = createFiber( ) h1 workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers
Slide 100
Slide 100 text
@gurlcode HostRoot div child.sibling = createFiber( ) h1 C workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers
Slide 101
Slide 101 text
@gurlcode HostRoot div return child h1 C workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers
Slide 102
Slide 102 text
@gurlcode HostRoot div h1 C workLoop performUnitOfWork beginWork updateHostComponent workInProgress.child = child
Slide 103
Slide 103 text
@gurlcode HostRoot div h1 C workLoop performUnitOfWork beginWork return workInProgress.child
Slide 104
Slide 104 text
@gurlcode HostRoot div h1 C workLoop performUnitOfWork return workInProgress.child
Slide 105
Slide 105 text
@gurlcode HostRoot div h1 C workLoop return workInProgress.child
Slide 106
Slide 106 text
@gurlcode HostRoot div h1 C nextUnitOfWork = performUnitWork
Slide 107
Slide 107 text
@gurlcode HostRoot div h1 C nextUnitOfWork !== null
Slide 108
Slide 108 text
@gurlcode HostRoot div workLoop h1 C
Slide 109
Slide 109 text
@gurlcode HostRoot div workLoop h1 C performUnitOfWork
Slide 110
Slide 110 text
@gurlcode HostRoot div workLoop h1 C performUnitOfWork beginWork
Slide 111
Slide 111 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C
Slide 112
Slide 112 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C reconcileChildFibers
Slide 113
Slide 113 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C workInProgress.child = null
Slide 114
Slide 114 text
@gurlcode HostRoot div workLoop performUnitOfWork beginWork h1 C return null
Slide 115
Slide 115 text
@gurlcode HostRoot div workLoop performUnitOfWork h1 C return null
Slide 116
Slide 116 text
@gurlcode HostRoot div workLoop nextUnitOfWork === null h1 C
Slide 117
Slide 117 text
@gurlcode HostRoot div workLoop performUnitOfWork h1 C completeUnitOfWork
Slide 118
Slide 118 text
@gurlcode HostRoot div h1 return workInProgress.child completeWork C workLoop performUnitOfWork completeUnitOfWork
Slide 119
Slide 119 text
@gurlcode HostRoot div h1 return workInProgress.child C workLoop performUnitOfWork completeUnitOfWork return fiber.sibling | | fiber.return
Slide 120
Slide 120 text
@gurlcode HostRoot div h1 return workInProgress.child C workLoop performUnitOfWork return fiber.sibling
Slide 121
Slide 121 text
@gurlcode HostRoot div h1 return workInProgress.child C workLoop return fiber.sibling return fiber.sibling
Slide 122
Slide 122 text
@gurlcode HostRoot div h1 return workInProgress.child C return fiber.sibling nextUnitOfWork = performUnitOfWork nextUnitOfWork = performUnitOfWork
Slide 123
Slide 123 text
@gurlcode HostRoot div h1 C
Slide 124
Slide 124 text
@gurlcode HostRoot div h1 C div
Slide 125
Slide 125 text
@gurlcode HostRoot div h1 C div
Slide 126
Slide 126 text
@gurlcode HostRoot div h1 C div
Slide 127
Slide 127 text
@gurlcode HostRoot div h1 C div
Slide 128
Slide 128 text
@gurlcode HostRoot div h1 C div
Slide 129
Slide 129 text
@gurlcode
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
@gurlcode
Slide 132
Slide 132 text
@gurlcode
Slide 133
Slide 133 text
@gurlcode
Slide 134
Slide 134 text
@gurlcode
Slide 135
Slide 135 text
@gurlcode Component.prototype.setState
Slide 136
Slide 136 text
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)
Slide 137
Slide 137 text
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update) enqueueUpdate(fiber, update)
Slide 138
Slide 138 text
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)
Slide 139
Slide 139 text
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update) scheduleWork( )
Slide 140
Slide 140 text
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)
Slide 141
Slide 141 text
@gurlcode HostRoot performWork div div h1 C
Slide 142
Slide 142 text
@gurlcode HostRoot div div h1 C renderRoot performWork
Slide 143
Slide 143 text
@gurlcode HostRoot div div h1 C renderRoot performWork workInProgress = current.alternate
Slide 144
Slide 144 text
@gurlcode HostRoot div div h1 C performWork nextUnitOfWork = workInProgress
Slide 145
Slide 145 text
@gurlcode HostRoot div div h1 C performWork nextUnitOfWork = workInProgress workLoop
Slide 146
Slide 146 text
@gurlcode HostRoot div div h1 C workLoop
Slide 147
Slide 147 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop
Slide 148
Slide 148 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork
Slide 149
Slide 149 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop oldProps !== newProps
Slide 150
Slide 150 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop return workInProgress.child
Slide 151
Slide 151 text
@gurlcode HostRoot div div h1 C workLoop return workInProgress.child
Slide 152
Slide 152 text
@gurlcode HostRoot div div h1 C workLoop
Slide 153
Slide 153 text
@gurlcode div h1 C div HostRoot
Slide 154
Slide 154 text
@gurlcode div h1 C div HostRoot
Slide 155
Slide 155 text
@gurlcode HostRoot div div h1 C workLoop
Slide 156
Slide 156 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop
Slide 157
Slide 157 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork
Slide 158
Slide 158 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
Slide 159
Slide 159 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent updateClassInstance
Slide 160
Slide 160 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent updateClassInstance processUpdateQueue
Slide 161
Slide 161 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent updateClassInstance fiber.memoizedState = newState
Slide 162
Slide 162 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork instance.state = fiber.memoizedState
Slide 163
Slide 163 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork nextChild = instance.render( )
Slide 164
Slide 164 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent reconcileChildFibers
Slide 165
Slide 165 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent fiber.effectTag = Update
Slide 166
Slide 166 text
{ alternate tag child sibling return memoizedState pendingProps effectTag … } @gurlcode Fiber work to be done
Slide 167
Slide 167 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent return workInProgress.child
Slide 168
Slide 168 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork return workInProgress.child
Slide 169
Slide 169 text
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop return workInProgress.child
Slide 170
Slide 170 text
@gurlcode HostRoot div div h1 C workLoop return workInProgress.child
Slide 171
Slide 171 text
@gurlcode HostRoot div div h1 C workLoop
Slide 172
Slide 172 text
@gurlcode HostRoot div h1 C div
Slide 173
Slide 173 text
@gurlcode div h1 C div
Slide 174
Slide 174 text
@gurlcode f f f f
Slide 175
Slide 175 text
@gurlcode VDOM
Slide 176
Slide 176 text
@gurlcode
Slide 177
Slide 177 text
@gurlcode fn fn fn
Slide 178
Slide 178 text
@gurlcode fn fn fn fn When a function is called, a new stack frame is added
Slide 179
Slide 179 text
@gurlcode fiber Fibers are virtual stack frames fiber fiber fiber
Slide 180
Slide 180 text
@gurlcode
Slide 181
Slide 181 text
Thank You! @gurlcode Huge shoutout to the React core team