A presentation at Reactathon in in San Francisco, CA, USA by Jenn Creighton
Everything I know about React I learned from Twitter Jenn Creighton (@gurlcode) FrontEnd Engineer @ Rent the RunwaY
React Detective ! @gurlcode
On a dark & stormy night… @gurlcode
@gurlcode
@gurlcode
🔎 @gurlcode
@gurlcode
Welcome! @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
React.createElement(”button”, null); @gurlcode
React Element { type: button, props: { … } } @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Fiber { tag child sibling return … } @gurlcode
Fiber { Fiber type tag child sibling return … } @gurlcode
Fiber { Child fiber Fiber type tag child sibling return … } @gurlcode
Fiber { Child fiber Fiber type tag child sibling return … Sibling fiber } @gurlcode
Fiber { Child fiber Parent fiber Fiber type tag child sibling return … Sibling fiber } @gurlcode
@gurlcode
reactInternalInstance @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
div h1 C div one-way two-way @gurlcode
@gurlcode
ReactDOM.unstable_createRoot(node) @gurlcode
new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode
createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode
createHostRootFiber createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode
HostRoot createFiber fiber { tag: HostRoot } createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode
HostRoot createFiber root.current = fiber new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode
HostRoot createFiber new ReactRoot ReactDOM.unstable_createRoot(node) @gurlcode
HostRoot createFiber this._internalRoot = root ReactDOM.unstable_createRoot(node) @gurlcode
HostRoot createFiber root = ReactRoot @gurlcode
@gurlcode
this._InternalRoot { current: { tag: HostRoot } … } @gurlcode
HostRoot root.render( ReactElement ) @gurlcode
HostRoot ReactRoot.render( ReactElement ) @gurlcode
HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode
HostRoot update = { element: element } ReactRoot.render( ReactElement ) @gurlcode
HostRoot enqueueUpdate(update) scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode
Fiber { alternate tag child sibling list of state updates return updateQueue } @gurlcode
HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode
HostRoot scheduleWork( ) scheduleWork scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode
HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode
HostRoot scheduleRootUpdate(current, element) ReactRoot.render( ReactElement ) @gurlcode
@gurlcode
HostRoot performWork @gurlcode
HostRoot renderRoot performWork @gurlcode
HostRoot createWorkInProgress(current) renderRoot performWork @gurlcode
HostRoot workInProgress = current.alternate renderRoot performWork @gurlcode
Fiber { Pooled fiber alternate tag child sibling return … } @gurlcode
@gurlcode
@gurlcode
HostRoot workInProgress === null renderRoot performWork @gurlcode
HostRoot createFiber(current) workInProgress = current.alternate renderRoot performWork @gurlcode
HostRoot current.alternate = workInProgress renderRoot performWork @gurlcode
HostRoot createWorkInProgress(current) renderRoot performWork @gurlcode
HostRoot nextUnitOfWork = workInProgress performWork @gurlcode
HostRoot workLoop nextUnitOfWork = workInProgress performWork @gurlcode
@gurlcode
fiber @gurlcode
HostRoot workLoop @gurlcode
HostRoot performUnitOfWork workLoop @gurlcode
HostRoot beginWork performUnitOfWork workLoop @gurlcode
HostRoot updateHostRoot beginWork performUnitOfWork workLoop @gurlcode
HostRoot processUpdateQueue updateHostRoot beginWork performUnitOfWork workLoop @gurlcode
HostRoot newState = { element: element } updateHostRoot beginWork performUnitOfWork workLoop @gurlcode
HostRoot fiber.memoizedState = newState updateHostRoot beginWork performUnitOfWork workLoop @gurlcode
Fiber { alternate tag child sibling return memoizedState … current state } @gurlcode
HostRoot nextChild = fiber.memoizedState.element beginWork performUnitOfWork workLoop @gurlcode
HostRoot reconcileChildFibers(child, nextChild) nextChild = fiber.memoizedState.element beginWork performUnitOfWork workLoop @gurlcode
HostRoot workInProgress.child = createFiber( ) div nextChild = fiber.memoizedState.element beginWork performUnitOfWork workLoop @gurlcode
HostRoot div return workInProgress.child beginWork performUnitOfWork workLoop @gurlcode
HostRoot div return workInProgress.child performUnitOfWork workLoop @gurlcode
HostRoot div return workInProgress.child workLoop @gurlcode
HostRoot div nextUnitOfWork = performUnitWork @gurlcode
HostRoot div nextUnitOfWork !== null @gurlcode
HostRoot div workLoop @gurlcode
HostRoot div performUnitOfWork workLoop @gurlcode
HostRoot div beginWork performUnitOfWork workLoop @gurlcode
HostRoot div updateHostComponent beginWork performUnitOfWork workLoop @gurlcode
HostRoot div nextChild = fiber.pendingProps.children beginWork performUnitOfWork workLoop @gurlcode
Fiber { alternate tag child sibling return memoizedState pendingProps … waiting to be applied } @gurlcode
HostRoot reconcileChildFibers(child, nextChild) div updateHostComponent beginWork performUnitOfWork workLoop @gurlcode
reconcileChildrenArray reconcileChildFibers HostRoot div updateHostComponent beginWork performUnitOfWork workLoop @gurlcode
HostRoot child = createFiber( ) reconcileChildFibers div updateHostComponent h1 beginWork performUnitOfWork workLoop @gurlcode
HostRoot child.sibling = createFiber( ) reconcileChildFibers div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot return child reconcileChildFibers div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot workInProgress.child = child div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot div return workInProgress.child h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot div h1 C return workInProgress.child performUnitOfWork workLoop @gurlcode
HostRoot div h1 C return workInProgress.child workLoop @gurlcode
HostRoot div h1 C nextUnitOfWork = performUnitWork @gurlcode
HostRoot div h1 C nextUnitOfWork !== null @gurlcode
HostRoot div h1 C workLoop @gurlcode
HostRoot div h1 C performUnitOfWork workLoop @gurlcode
HostRoot div h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot reconcileChildFibers div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot workInProgress.child = null div updateHostComponent h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot div return null h1 C beginWork performUnitOfWork workLoop @gurlcode
HostRoot div h1 C return null performUnitOfWork workLoop @gurlcode
HostRoot div h1 C nextUnitOfWork === null workLoop @gurlcode
HostRoot div h1 C completeUnitOfWork performUnitOfWork workLoop @gurlcode
HostRoot div completeWork h1 C completeUnitOfWork return performUnitOfWork workInProgress.child workLoop @gurlcode
HostRoot div return fiber.sibling | | fiber.return h1 C completeUnitOfWork return performUnitOfWork workInProgress.child workLoop @gurlcode
HostRoot div h1 C return fiber.sibling return performUnitOfWork workInProgress.child workLoop @gurlcode
HostRoot div h1 C return fiber.sibling return return workInProgress.child fiber.sibling workLoop @gurlcode
HostRoot div h1 C return fiber.sibling nextUnitOfWork = performUnitOfWork return workInProgress.child nextUnitOfWork = performUnitOfWork @gurlcode
HostRoot div h1 C @gurlcode
HostRoot div h1 C div @gurlcode
HostRoot div h1 C div @gurlcode
HostRoot div h1 C div @gurlcode
HostRoot div h1 C div @gurlcode
HostRoot div h1 C div @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
Component.prototype.setState @gurlcode
HostRoot div h1 C div enqueueSetState(fiber, update) @gurlcode
HostRoot div h1 enqueueUpdate(fiber, update) C div enqueueSetState(fiber, update) @gurlcode
HostRoot div h1 C div enqueueSetState(fiber, update) @gurlcode
HostRoot div h1 scheduleWork( ) C div enqueueSetState(fiber, update) @gurlcode
HostRoot div h1 C div enqueueSetState(fiber, update) @gurlcode
HostRoot div h1 C div performWork @gurlcode
HostRoot div h1 renderRoot C div performWork @gurlcode
HostRoot div h1 C workInProgress = current.alternate renderRoot div performWork @gurlcode
HostRoot div h1 nextUnitOfWork = workInProgress C div performWork @gurlcode
HostRoot div h1 C workLoop nextUnitOfWork = workInProgress div performWork @gurlcode
HostRoot div h1 C div workLoop @gurlcode
HostRoot div h1 performUnitOfWork C div workLoop @gurlcode
HostRoot div h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot div h1 C oldProps !== newProps performUnitOfWork div workLoop @gurlcode
HostRoot div h1 C return workInProgress.child performUnitOfWork div workLoop @gurlcode
HostRoot div h1 return workInProgress.child C div workLoop @gurlcode
HostRoot div h1 C div workLoop @gurlcode
HostRoot div h1 C div @gurlcode
HostRoot div h1 C div @gurlcode
HostRoot div h1 C div workLoop @gurlcode
HostRoot div h1 performUnitOfWork C div workLoop @gurlcode
HostRoot div h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot updateClassInstance div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot processUpdateQueue updateClassInstance div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot fiber.memoizedState = newState updateClassInstance div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot div instance.state = fiber.memoizedState h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot div nextChild = instance.render( ) h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot reconcileChildFibers div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot fiber.effectTag = Update div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode
Fiber { work to be done alternate tag child sibling return memoizedState pendingProps effectTag … } @gurlcode
HostRoot return workInProgress.child div updateClassComponent h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot div return workInProgress.child h1 C beginWork performUnitOfWork div workLoop @gurlcode
HostRoot div h1 C return workInProgress.child performUnitOfWork div workLoop @gurlcode
HostRoot div h1 return workInProgress.child C div workLoop @gurlcode
HostRoot div h1 C div workLoop @gurlcode
HostRoot div h1 C div @gurlcode
div h1 C div @gurlcode
f f f f @gurlcode
VDOM @gurlcode
@gurlcode
fn fn fn @gurlcode
When a function is called, a new stack frame is added fn fn fn fn @gurlcode
Fibers are virtual stack frames fiber fiber fiber fiber @gurlcode
@gurlcode
Thank You! Huge shoutout to the React core team 💛 @gurlcode
for free. You
can too.