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
48
Pop Culture, The Pendulum and Progress
jergason
0
91
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
90
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
140
Other Decks in Programming
See All in Programming
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Hermes: Better Performance with Bytecode Translation (React Universe 2024)
tmikov2023
0
100
Rubyのobject_id
qnighy
6
1.3k
GoのIteratorに詳しくなってしまう
inatonix
1
210
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
GraphQLとGigaViewer for Apps
numeroanddev
2
140
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
130
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
200
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
620
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
550
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
420
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Happy Clients
brianwarren
96
6.6k
Being A Developer After 40
akosma
84
590k
Designing the Hi-DPI Web
ddemaree
278
34k
Designing with Data
zakiwarfel
98
5k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Building Your Own Lightsaber
phodgson
101
6k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
RailsConf 2023
tenderlove
28
810
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
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