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
100
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
110
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
150
Other Decks in Programming
See All in Programming
CSC305 Lecture 08
javiergs
PRO
0
280
CSC305 Lecture 09
javiergs
PRO
0
310
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
Catch Up: Go Style Guide Update
andpad
0
250
Developer Joy - The New Paradigm
hollycummins
1
370
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.6k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
240
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
550
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
630
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Designing for Performance
lara
610
69k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Become a Pro
speakerdeck
PRO
29
5.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
How STYLIGHT went responsive
nonsquared
100
5.9k
Mobile First: as difficult as doing things right
swwweet
225
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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