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
180
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
MCPでVibe Working。そして、結局はContext Eng（略）/ Working with Vibe on MCP And Context Eng
Avatar for r-kagaya rkaga
5
2.3k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
Avatar for Tetta Noguchi tetta_pdnt
0
4.3k
AI時代のUIはどこへ行く？
Avatar for Yusuke Wada yusukebe
18
9.1k
今だからこそ入門する Server-Sent Events (SSE)
Avatar for NearMeの技術発表資料です nearme_tech
PRO
3
260
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.7k
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
890
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
350
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
180
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
Avatar for teamLab teamlab
PRO
0
570
請來的 AI Agent 同事們在寫程式時，怎麼用 pytest 去除各種幻想與盲點
Avatar for Keith Yang keitheis
0
130
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
Avatar for Daichi Takeya taked137
0
190
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
7
2.5k

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
31
2.2k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
850
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
530
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
9.9k

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