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
110
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
150
Other Decks in Programming
See All in Programming
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
CSC305 Lecture 06
javiergs
PRO
0
270
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
EMこそClaude Codeでコード調査しよう
shibayu36
0
350
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
350
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
100
CSC509 Lecture 08
javiergs
PRO
0
230
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.3k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
620
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
RailsConf 2023
tenderlove
30
1.3k
It's Worth the Effort
3n
187
28k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Thoughts on Productivity
jonyablonski
70
4.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
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