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
iOS開発スターターキットの作り方
akidon0000
0
230
新世界の理解
koriym
0
130
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
450
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
実践 Dev Containers × Claude Code
touyu
1
120
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
800
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
410
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Being A Developer After 40
akosma
90
590k
Practical Orchestrator
shlominoach
190
11k
What's in a price? How to price your products and services
michaelherold
246
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Writing Fast Ruby
sferik
628
62k
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