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

React behind the scenes

Igor Halfeld
March 15, 2019
Programming
0
38

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
140
How to migrate legacy frontend?
igorhalfeld
1
100
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
500
Deninho, the TS children
igorhalfeld
1
200
Micro Front-ends, what they don't tell you
igorhalfeld
0
360
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
84

Other Decks in Programming

See All in Programming
flutterkaigi_2024.pdf
kyoheig3
0
150
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
CSC509 Lecture 11
javiergs
PRO
0
180
Amazon Bedrock Agentsを用いてアプリ開発してみた！
har1101
0
340
Jakarta EE meets AI
ivargrimstad
0
210
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
Ethereum_.pdf
nekomatu
0
460
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
220
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370

Featured

See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Unsuck your backbone
ammeep
668
57k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Designing Experiences People Love
moore
138
23k
Optimizing for Happiness
mojombo
376
70k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
It's Worth the Effort
3n
183
27k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Become a Pro
speakerdeck
PRO
25
5k

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