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

React behind the scenes

Igor Halfeld
March 15, 2019
Programming
0
39

React behind the scenes

How React.js works behind the scenes

Igor Halfeld

March 15, 2019
Tweet

More Decks by Igor Halfeld

See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
150
How to migrate legacy frontend?
igorhalfeld
1
110
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
46
Step by step I followed a career in software
igorhalfeld
0
690
Using AI to create memes
igorhalfeld
0
510
Deninho, the TS children
igorhalfeld
1
200
Micro Front-ends, what they don't tell you
igorhalfeld
0
370
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
84

Other Decks in Programming

See All in Programming
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
310
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
160
GoとPHPのインターフェイスの違い
shimabox
2
210
Introduction to kotlinx.rpc
arawn
0
770
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
Domain-Driven Design (Tutorial)
hschwentner
13
22k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
940
JAWS Days 2025のインフラ
komakichi
1
120
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
Jakarta EE meets AI
ivargrimstad
0
530

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Six Lessons from altMBA
skipperchong
27
3.6k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Optimizing for Happiness
mojombo
377
70k
For a Future-Friendly Web
brad_frost
176
9.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.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