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
86
Rethinking All Practices: Building Web Applications with Elm
jergason
2
180
The Future is Old - Functional Programming in JavaScript
jergason
1
220
Notes From The Future: Beyond Flux
jergason
0
90
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
140
Other Decks in Programming
See All in Programming
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
320
Milestoner
bkuhlmann
1
400
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
290
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
Ruby GitHub Packages
bkuhlmann
0
620
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
150
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Ruby Pattern Matching
bkuhlmann
0
920
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
8
2.2k
Featured
See All Featured
Debugging Ruby Performance
tmm1
69
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
YesSQL, Process and Tooling at Scale
rocio
162
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Music & Morning Musume
bryan
40
5.6k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
In The Pink: A Labor of Love
frogandcode
137
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Optimizing for Happiness
mojombo
369
69k
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