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
54
Pop Culture, The Pendulum and Progress
jergason
0
98
Rethinking All Practices: Building Web Applications with Elm
jergason
2
190
The Future is Old - Functional Programming in JavaScript
jergason
1
240
Notes From The Future: Beyond Flux
jergason
0
96
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
150
Other Decks in Programming
See All in Programming
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
430
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
140
Passkeys for Java Developers
ynojima
1
260
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
9
1.9k
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
100
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
TypeScript LSP の今までとこれから
quramy
0
130
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
600
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
Language Server と喋ろう – TSKaigi 2025
pizzacat83
2
740
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
540
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Scaling GitHub
holman
459
140k
Six Lessons from altMBA
skipperchong
28
3.8k
Rails Girls Zürich Keynote
gr2m
94
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
454
42k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Making Projects Easy
brettharned
116
6.2k
Code Review Best Practice
trishagee
68
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