Everything I Know About React I Learned From Twitter

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

React Detective ! @gurlcode

On a dark & stormy night… @gurlcode

@gurlcode

Welcome! @gurlcode

@gurlcode

<button /> @gurlcode

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

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

@gurlcode

{ tag child sibling return … } Fiber @gurlcode

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

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

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

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

@gurlcode

reactInternalInstance @gurlcode

@gurlcode

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

@gurlcode

@gurlcode ReactDOM.unstable_createRoot(node)

@gurlcode new ReactRoot ReactDOM.unstable_createRoot(node)

@gurlcode createFiberRoot new ReactRoot ReactDOM.unstable_createRoot(node)

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

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

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

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

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

@gurlcode createFiber root = ReactRoot HostRoot

@gurlcode

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

@gurlcode root.render( ReactElement ) HostRoot

@gurlcode ReactRoot.render( ReactElement ) HostRoot

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

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

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

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

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

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

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

@gurlcode

@gurlcode HostRoot performWork

@gurlcode renderRoot HostRoot performWork

@gurlcode renderRoot HostRoot performWork createWorkInProgress(current)

@gurlcode renderRoot HostRoot performWork workInProgress = current.alternate

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

@gurlcode

@gurlcode renderRoot HostRoot performWork workInProgress === null

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

@gurlcode renderRoot HostRoot performWork current.alternate = workInProgress

@gurlcode renderRoot HostRoot performWork createWorkInProgress(current)

@gurlcode HostRoot performWork nextUnitOfWork = workInProgress

@gurlcode nextUnitOfWork = workInProgress HostRoot performWork workLoop

@gurlcode

fiber @gurlcode

@gurlcode HostRoot workLoop

@gurlcode HostRoot performUnitOfWork workLoop

@gurlcode HostRoot workLoop performUnitOfWork beginWork

@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot

@gurlcode HostRoot workLoop performUnitOfWork beginWork updateHostRoot processUpdateQueue

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

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

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

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

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

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

@gurlcode HostRoot performUnitOfWork beginWork div workLoop return workInProgress.child

@gurlcode HostRoot performUnitOfWork div workLoop return workInProgress.child

@gurlcode HostRoot div workLoop return workInProgress.child

@gurlcode HostRoot nextUnitOfWork = performUnitWork div

@gurlcode HostRoot nextUnitOfWork !== null div

@gurlcode HostRoot workLoop div

@gurlcode HostRoot div performUnitOfWork workLoop

@gurlcode HostRoot div workLoop performUnitOfWork beginWork

@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent

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

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

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

@gurlcode HostRoot div reconcileChildrenArray workLoop performUnitOfWork beginWork updateHostComponent reconcileChildFibers

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

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

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

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

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

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

@gurlcode HostRoot div h1 C workLoop return workInProgress.child

@gurlcode HostRoot div h1 C nextUnitOfWork = performUnitWork

@gurlcode HostRoot div h1 C nextUnitOfWork !== null

@gurlcode HostRoot div workLoop h1 C

@gurlcode HostRoot div workLoop h1 C performUnitOfWork

@gurlcode HostRoot div workLoop h1 C performUnitOfWork beginWork

@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C

@gurlcode HostRoot div workLoop performUnitOfWork beginWork updateHostComponent h1 C reconcileChildFibers

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

@gurlcode HostRoot div workLoop performUnitOfWork beginWork h1 C return null

@gurlcode HostRoot div workLoop performUnitOfWork h1 C return null

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

@gurlcode HostRoot div workLoop performUnitOfWork h1 C completeUnitOfWork

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

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

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

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

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

@gurlcode HostRoot div h1 C

@gurlcode HostRoot div h1 C div

@gurlcode

@gurlcode Component.prototype.setState

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

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

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

@gurlcode HostRoot performWork div div h1 C

@gurlcode HostRoot div div h1 C renderRoot performWork

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

@gurlcode HostRoot div div h1 C performWork nextUnitOfWork = workInProgress

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

@gurlcode HostRoot div div h1 C workLoop

@gurlcode HostRoot div div h1 C performUnitOfWork workLoop

@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork

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

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

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

@gurlcode div h1 C div HostRoot

@gurlcode HostRoot div div h1 C performUnitOfWork workLoop

@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork

@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent

updateClassInstance

updateClassInstance processUpdateQueue

updateClassInstance fiber.memoizedState = newState

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

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

reconcileChildFibers

fiber.effectTag = Update

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

return workInProgress.child

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

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

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

@gurlcode HostRoot div h1 C div

@gurlcode div h1 C div

@gurlcode f f f f

@gurlcode VDOM

@gurlcode

@gurlcode fn fn fn

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

@gurlcode fiber Fibers are virtual stack frames fiber fiber fiber

@gurlcode

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

Everything I Know About React I Learned From Twitter

Everything I Know About React I Learned From Twitter

More Decks by Jenn Creighton

Other Decks in Programming

Featured

Transcript