Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Everything I Know About React I Learned From Tw...
Search
Jenn Creighton
March 31, 2019
Programming
0
1.1k
Everything I Know About React I Learned From Twitter
Jenn Creighton
March 31, 2019
Tweet
Share
More Decks by Jenn Creighton
See All by Jenn Creighton
Understanding Iterators & Iterables in JavaScript
jenncreighton
0
120
React 16, the future & you (December 4, 2018)
jenncreighton
1
180
The how and why of flexible React components
jenncreighton
7
4.3k
The How and Why of Flexible React Components
jenncreighton
0
180
React 16, the future & you
jenncreighton
0
200
Other Decks in Programming
See All in Programming
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.1k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
510
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.4k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
リッチエディターを安全に開発・運用するために
unachang113
1
270
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
AIのメモリー
watany
11
1k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
280
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
840
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
A better future with KSS
kneath
238
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
What's in a price? How to price your products and services
michaelherold
246
12k
A designer walks into a library…
pauljervisheath
207
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Done Done
chrislema
184
16k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
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
@gurlcode
@gurlcode
None
@gurlcode
Welcome! @gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
<button /> @gurlcode
@gurlcode React.createElement(”button”, null);
{ type: button, props: { … } } React Element
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@gurlcode
@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
@gurlcode
@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 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
@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 HostRoot div h1 C div
@gurlcode HostRoot div h1 C div
@gurlcode HostRoot div h1 C div
@gurlcode HostRoot div h1 C div
@gurlcode
None
@gurlcode
@gurlcode
@gurlcode
@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)
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update) scheduleWork( )
@gurlcode HostRoot div div h1 C enqueueSetState(fiber, update)
@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 HostRoot div div h1 C workLoop
@gurlcode div h1 C div HostRoot
@gurlcode div h1 C div HostRoot
@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 beginWork updateClassComponent
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
updateClassInstance
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
updateClassInstance processUpdateQueue
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
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( )
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
reconcileChildFibers
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
fiber.effectTag = Update
{ alternate tag child sibling return memoizedState pendingProps effectTag …
} @gurlcode Fiber work to be done
@gurlcode HostRoot div div h1 C performUnitOfWork workLoop beginWork updateClassComponent
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 div h1 C 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 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