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
190
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
60
Pop Culture, The Pendulum and Progress
jergason
0
99
Rethinking All Practices: Building Web Applications with Elm
jergason
2
190
The Future is Old - Functional Programming in JavaScript
jergason
1
250
Notes From The Future: Beyond Flux
jergason
0
100
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
150
Other Decks in Programming
See All in Programming
開発生産性を上げるための生成AI活用術
starfish719
1
150
CSC305 Lecture 01
javiergs
PRO
1
390
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
390
CSC509 Lecture 03
javiergs
PRO
0
320
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
340
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
140
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
120
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
120
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
230
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
1k
Model Pollution
hschwentner
1
180
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5k
How to Ace a Technical Interview
jacobian
280
23k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Site-Speed That Sticks
csswizardry
11
870
The Pragmatic Product Professional
lauravandoore
36
6.9k
RailsConf 2023
tenderlove
30
1.2k
Writing Fast Ruby
sferik
629
62k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
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