Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React behind the scenes

Avatar for Igor Halfeld Igor Halfeld
March 15, 2019
Programming
0
51

React behind the scenes

How React.js works behind the scenes

Avatar for Igor Halfeld

Igor Halfeld

March 15, 2019
Tweet

More Decks by Igor Halfeld

See All by Igor Halfeld
Modular monoliths with fastify
Avatar for Igor Halfeld igorhalfeld
0
170
How to migrate legacy frontend?
Avatar for Igor Halfeld igorhalfeld
1
120
Patterns for perfect components in Vue.js
Avatar for Igor Halfeld igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
Avatar for Igor Halfeld igorhalfeld
0
52
Step by step I followed a career in software
Avatar for Igor Halfeld igorhalfeld
0
700
Using AI to create memes
Avatar for Igor Halfeld igorhalfeld
0
520
Deninho, the TS children
Avatar for Igor Halfeld igorhalfeld
1
210
Micro Front-ends, what they don't tell you
Avatar for Igor Halfeld igorhalfeld
0
380
CSS in JavaScripto, the anti-pattern that is good
Avatar for Igor Halfeld igorhalfeld
1
89

Other Decks in Programming

See All in Programming
What's new in AppKit on macOS 26
Avatar for 1024jp 1024jp
0
170
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
910
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
Avatar for panda_program panda_program
3
630
PHPUnitの限界をPlaywrightで補完するテストアプローチ
Avatar for yuzneri yuzneri
0
270
CDK引数設計道場100本ノック
Avatar for kazuho cryer-shinozuka badmintoncryer
2
560
CIを整備してメンテナンスを生成AIに任せる
Avatar for Hazumi Ichijo hazumirr
0
190
Rails Frontend Evolution: It Was a Setup All Along
Avatar for Svyatoslav Kryukov skryukov
0
320
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
Avatar for Gunji gunji
0
220
生成AI時代のコンポーネントライブラリの作り方
Avatar for touyou touyou
1
300
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
0
450
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
180
Claude Code で Astro blog を Pages から Workers へ移行してみた
Avatar for Kei Kamikawa codehex
0
140

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
282
13k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Designing for Performance
Avatar for Lara Hogan lara
610
69k

Transcript

  1. React behind the scenes. Virtual DOM, reconciliation phase, diff algorithm..

  2. Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld

  3. None
  4. None
  5. None
  6. None

  7. Vamos começar suavão..

  8. Browser É mágica!

  9. User interface Browser Engine Render Engine Data persistence Networking JavaScript

    Interpreter UI Back-end

  10. DOM Document Object Model

  11. None

  12. Virtual DOM “Virtual” Document Object Model

  13. None
  14. None

  15. Até agora, tudo legal…

  16. Beleza, e então? O front-end moderno começa depois do Angular

    1.x

  17. Watcher DOM Watcher State Watcher

  18. Virtual DOM Wrapper

  19. Deu bom

  20. Vamos imaginar… …a construção de uma interface.

  21. <p> <div> <section>

  22. Recursivo!

  23. None

  24. Render e eventos usam a main thread! Imagina se tivesse

    muitos childrens e fazer handling de eventos ao mesmo tempo!
  25. None

  26. Precisamos ter o controle! A main thread precisa estar disponível

    para updates prioritários.

  27. section div button return children sibling Fiber

  28. None
  29. None
  30. None

  31. Onde eu quero chegar com tudo isso?

  32. Obrigado! igorluiz.me/talks - @IgorHalfeld