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
52

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
53
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
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
94

Other Decks in Programming

See All in Programming
令和最新版Android Studioで化石デバイス向けアプリを作る
Avatar for Sora Arakawa arkw
0
470
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
Avatar for Selçuk Usta selcukusta
0
140
Graviton と Nitro と私
Avatar for maroon1st maroon1st
0
150
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
400
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
2
330
The Art of Re-Architecture - Droidcon India 2025
Avatar for Sid Patil siddroid
0
150
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
6
2.8k
C-Shared Buildで突破するAI Agent バックテストの壁
Avatar for po3rin po3rin
0
420
Go コードベースの構成と AI コンテキスト定義
Avatar for ANDPAD inc andpad
0
150
AI Agent Dojo ＃4: watsonx Orchestrate ADK体験
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
120
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
Avatar for n0bisuke n0bisuke2
3
1.4k
AI前提で考えるiOSアプリのモダナイズ設計
Avatar for 野瀬田　裕樹 yuukiw00w
0
210

Featured

See All Featured
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
2.5k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
36
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
160
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
200
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
76
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
30
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.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