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
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
140
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
160
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
480
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
820
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.2k
新しいモバイルアプリ勉強会(仮)について
uetyo
1
100
20250708_JAWS_opscdk
takuyay0ne
2
150
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
GPUを計算資源として使おう!
primenumber
1
290
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Building Adaptive Systems
keathley
43
2.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Navigating Team Friction
lara
187
15k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Language of Interfaces
destraynor
158
25k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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