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

React behind the scenes

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Igor Halfeld Igor Halfeld
March 15, 2019
Programming
0
53

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
190
How to migrate legacy frontend?
Avatar for Igor Halfeld igorhalfeld
1
130
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
59
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
530
Deninho, the TS children
Avatar for Igor Halfeld igorhalfeld
1
220
Micro Front-ends, what they don't tell you
Avatar for Igor Halfeld igorhalfeld
0
390
CSS in JavaScripto, the anti-pattern that is good
Avatar for Igor Halfeld igorhalfeld
1
99

Other Decks in Programming

See All in Programming
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
190
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.8k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
20
7.1k
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.8k
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130

Featured

See All Featured
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
230
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
910
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k

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