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
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
690
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
Avatar for Jonghyuk Max Kim mmmaxkim
0
1.4k
KessokuでDIでもgoroutineを活用する / Go Connect #6
Avatar for mazrean mazrean
0
140
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
120
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
220
Kiroで始めるAI-DLC
Avatar for kaonash kaonash
2
540
MCPでVibe Working。そして、結局はContext Eng（略）/ Working with Vibe on MCP And Context Eng
Avatar for r-kagaya rkaga
5
1.8k
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
150
Swift Updates - Learn Languages 2025
Avatar for Yuta Koshizawa koher
2
440
パッケージ設計の黒魔術/Kyoto.go#63
Avatar for kadota kyohei lufia
3
420
CloudflareのChat Agent Starter Kitで簡単！AIチャットボット構築
Avatar for syumai syumai
2
410
アセットのコンパイルについて
Avatar for ojun ojun9
0
110

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
800
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
910
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k

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