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
90

Other Decks in Programming

See All in Programming
Making Angular Apps Smarter with Generative AI: Local and Offline-capable
Avatar for Christian Liebel christianliebel
PRO
0
100
AI 駆動開発におけるコミュニティと AWS CDK の価値
Avatar for Kenji Kono konokenj
5
320
マイベストのシンプルなデータ基盤の話 - Googleスイートとのつき合い方 / mybest-simple-data-architecture-google-nized
Avatar for snhryt snhryt
0
120
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
670
TransformerからMCPまで（現代AIを理解するための羅針盤）
Avatar for MIKIO KUBO mickey_kubo
7
5.9k
AsyncSequenceとAsyncStreamのプロポーザルを全部読む！！
Avatar for Shigure Shimotori s_shimotori
1
220
Designing Repeatable Edits: The Architecture of . in Vim
Avatar for Satoru Kitaguchi satorunooshie
0
220
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
400
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
Avatar for Márton Braun zsmb
2
450
CSC305 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
340
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
Avatar for N Akita nakita628
0
330
Researchlyの開発で参考にしたデザイン
Avatar for arakawa adsholoko
0
110

Featured

See All Featured
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
2.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