Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

React Performance: ONE WEIRD TRICK

Avatar for Jamison Dance Jamison Dance
April 29, 2016
Programming
210
1

React Performance: ONE WEIRD TRICK

How do you optimize React applications? WITH ONE WEIRD TRICK

Avatar for Jamison Dance

Jamison Dance

April 29, 2016

More Decks by Jamison Dance

See All by Jamison Dance
Community for New Developers
Avatar for Jamison Dance jergason
0
73
Pop Culture, The Pendulum and Progress
Avatar for Jamison Dance jergason
0
140
Rethinking All Practices: Building Web Applications with Elm
Avatar for Jamison Dance jergason
2
220
The Future is Old - Functional Programming in JavaScript
Avatar for Jamison Dance jergason
1
270
Notes From The Future: Beyond Flux
Avatar for Jamison Dance jergason
0
120
nosql and mongodb:  ¯\_(ツ)_/¯
Avatar for Jamison Dance jergason
0
170

Other Decks in Programming

See All in Programming
手動確認はもう限界 〜XCUITestでCustom URL Schemeの遷移を起動種別ごとに自動テストする〜 / Testing Custom URL Schemes with XCUITest
Avatar for otouto otouto
0
310
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
Avatar for 赤神青空 akagami
PRO
0
160
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
180
Vue Fes Japan 2026 タイムテーブル徹底解説
Avatar for 448jp | OKI Yoshiya 448jp
1
250
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2.3k
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
370
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
6
4.6k
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
660
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
380
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
210
iOSDC2026登壇資料.pdf
Avatar for RioFujimon riofujimon
0
170
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.4k

Featured

See All Featured
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
300
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
520
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
320
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
How to make the Groovebox
Avatar for あそなす asonas
2
2.4k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
230
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
67
58k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
530

Transcript

  1. React Performance @jergason

  2. BUY React Rally Tickets http://reactrally.com

  3. React Performance

  4. ONE WEIRD TRICK for speeding up your React applications

  5. ONE WEIRD TRICK

  6. ONE WEIRD TRICK Have a deep knowledge of React's rendering

    model and JavaScript execution combined with familiarity with browser and React performance tooling.

  7. ONE WEIRD TRICK Have a deep knowledge of React's rendering

    model and JavaScript execution combined with familiarity with browser and React performance tooling and know some basic techniques of general optimization.

  8. How React Works How Optimization Works Demo

  9. How React Works

  10. setState render render render

  11. dispatch reducer render render render render render render

  12. How Optimization Works

  13. Rules of Optimization 1.Don't 2.Don't yet 3.Profile before optimizing http://c2.com/cgi/wiki?RulesOfOptimization

  14. Optimization In React

  15. Render will be called MANY TIMES

  16. Two Options • call render fewer times • make render

    faster

  17. Demo https://github.com/jergason/slowloris

  18. Resources • https://facebook.github.io/react/docs/perf.html • https://facebook.github.io/react/docs/advanced- performance.html • http://benchling.engineering/performance- engineering-with-react/ •

    http://benchling.engineering/deep-dive-react-perf- debugging/ • https://github.com/reddit/reddit-mobile/issues/247