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
90

Other Decks in Programming

See All in Programming
ドメイン駆動設計のエッセンス
Avatar for 増田 亨 masuda220
PRO
15
6.7k
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
Avatar for MURAKAMI Masahiko fossamagna
2
110
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
Avatar for Kotaro7750 kotaro7750
0
130
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
3
1.7k
品質ワークショップをやってみた
Avatar for Nealle nealle
0
660
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
680
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
Avatar for Márton Braun zsmb
2
430
data-viz-talk-cz-2025
Avatar for Leonardo Collado-Torres lcolladotor
0
100
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
420
社会人になっても趣味開発を続けたい！ / traPavilion
Avatar for mazrean mazrean
1
120
Using Types to Save Your Code's Future
Avatar for Björn Fahller rollbear
0
100

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
190
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
60
9.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.1k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k

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