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
React behind the scenes
Search
Igor Halfeld
March 15, 2019
Programming
0
51
React behind the scenes
How React.js works behind the scenes
Igor Halfeld
March 15, 2019
Tweet
Share
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
170
How to migrate legacy frontend?
igorhalfeld
1
120
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
52
Step by step I followed a career in software
igorhalfeld
0
700
Using AI to create memes
igorhalfeld
0
520
Deninho, the TS children
igorhalfeld
1
210
Micro Front-ends, what they don't tell you
igorhalfeld
0
380
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
89
Other Decks in Programming
See All in Programming
What's new in AppKit on macOS 26
1024jp
0
170
Porting a visionOS App to Android XR
akkeylab
0
910
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
630
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
270
CDK引数設計道場100本ノック
badmintoncryer
2
560
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
190
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
220
生成AI時代のコンポーネントライブラリの作り方
touyou
1
300
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
450
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
180
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
140
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Language of Interfaces
destraynor
158
25k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Into the Great Unknown - MozCon
thekraken
40
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Code Reviewing Like a Champion
maltzj
524
40k
Facilitating Awesome Meetings
lara
54
6.5k
Side Projects
sachag
455
43k
Designing for Performance
lara
610
69k
Transcript
React behind the scenes. Virtual DOM, reconciliation phase, diff algorithm..
Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld
None
None
None
None
Vamos começar suavão..
Browser É mágica!
User interface Browser Engine Render Engine Data persistence Networking JavaScript
Interpreter UI Back-end
DOM Document Object Model
None
Virtual DOM “Virtual” Document Object Model
None
None
Até agora, tudo legal…
Beleza, e então? O front-end moderno começa depois do Angular
1.x
Watcher DOM Watcher State Watcher
Virtual DOM Wrapper
Deu bom
Vamos imaginar… …a construção de uma interface.
<p> <div> <section>
Recursivo!
None
Render e eventos usam a main thread! Imagina se tivesse
muitos childrens e fazer handling de eventos ao mesmo tempo!
None
Precisamos ter o controle! A main thread precisa estar disponível
para updates prioritários.
section div button return children sibling Fiber
None
None
None
Onde eu quero chegar com tudo isso?
Obrigado! igorluiz.me/talks - @IgorHalfeld