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
65
0

React behind the scenes

How React.js works behind the scenes

Avatar for Igor Halfeld

Igor Halfeld

March 15, 2019

More Decks by Igor Halfeld

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

Other Decks in Programming

See All in Programming
MySQLとPostgreSQLって何が違うの？
Avatar for 赤神青空 akagami
0
130
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
130
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
220
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
250
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
1
370
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
19k
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
450
書籍「プロフェッショナルAI駆動開発」紹介スライド
Avatar for Juntaro Matsumoto juntaromatsumoto
0
470
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
310
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
200
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
200
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
230

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.9k
A Soul's Torment
Avatar for Nat Ma seathinner
6
3.5k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
580
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
250
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.1k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
500
Between Models and Reality
Avatar for mayunak mayunak
4
400
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
500
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
380
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k

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