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
51
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
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.1k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
930
AWS Step Functions は CDK で書こう!
konokenj
4
190
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
sappoRo.R #12 初心者セッション
kosugitti
0
280
CI改善もDatadogとともに
taumu
0
200
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
Swift Testingのモチベを上げたい
stoticdev
2
110
TCAを用いたAmebaのリアーキテクチャ
dazy
0
200
Ça bouge du côté des animations CSS !
goetter
2
150
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Bash Introduction
62gerente
611
210k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Site-Speed That Sticks
csswizardry
4
410
A Philosophy of Restraint
colly
203
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Scaling GitHub
holman
459
140k
Statistics for Hackers
jakevdp
797
220k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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