Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Performance: ONE WEIRD TRICK
Search
Jamison Dance
April 29, 2016
Programming
1
180
React Performance: ONE WEIRD TRICK
How do you optimize React applications? WITH ONE WEIRD TRICK
Jamison Dance
April 29, 2016
Tweet
Share
More Decks by Jamison Dance
See All by Jamison Dance
Community for New Developers
jergason
0
50
Pop Culture, The Pendulum and Progress
jergason
0
95
Rethinking All Practices: Building Web Applications with Elm
jergason
2
180
The Future is Old - Functional Programming in JavaScript
jergason
1
240
Notes From The Future: Beyond Flux
jergason
0
94
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
140
Other Decks in Programming
See All in Programming
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
260
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
Introduction to kotlinx.rpc
arawn
0
760
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
3.9k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
150
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.1k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
300
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
How STYLIGHT went responsive
nonsquared
98
5.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Site-Speed That Sticks
csswizardry
4
400
BBQ
matthewcrist
87
9.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Side Projects
sachag
452
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Speed Design
sergeychernyshev
27
810
Code Review Best Practice
trishagee
67
18k
Transcript
React Performance @jergason
BUY React Rally Tickets http://reactrally.com
React Performance
ONE WEIRD TRICK for speeding up your React applications
ONE WEIRD TRICK
ONE WEIRD TRICK Have a deep knowledge of React's rendering
model and JavaScript execution combined with familiarity with browser and React performance tooling.
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.
How React Works How Optimization Works Demo
How React Works
setState render render render
dispatch reducer render render render render render render
How Optimization Works
Rules of Optimization 1.Don't 2.Don't yet 3.Profile before optimizing http://c2.com/cgi/wiki?RulesOfOptimization
Optimization In React
Render will be called MANY TIMES
Two Options • call render fewer times • make render
faster
Demo https://github.com/jergason/slowloris
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