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
55

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
200
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
66
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
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
100

Other Decks in Programming

See All in Programming
AIに任せる範囲を安全に広げるためにやっていること
Avatar for Masashi Fukuzawa fukucheee
0
130
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
710
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
9
2.7k
Claude Code の Skill で複雑な既存仕様をすっきり整理しよう
Avatar for yuichiro_takahashi yuichirokato
1
360
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
710
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
360
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
250
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
170
エラーログのマスキングの仕組みづくりに役立ったASTの話
Avatar for Kenichi Shihota kumoichi
0
170
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
Avatar for NAGATA Hiroaki handlename
0
190
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
140
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
560

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
150
17k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
150
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
120
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
130
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
480
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
270
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
390
Side Projects
Avatar for Sacha Greif sachag
455
43k

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