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
56
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
250
Notes From The Future: Beyond Flux
jergason
0
98
nosql and mongodb: ¯\_(ツ)_/¯
jergason
0
150
Other Decks in Programming
See All in Programming
Claude Codeの使い方
ttnyt8701
1
130
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
790
GoのWebAssembly活用パターン紹介
syumai
3
10k
Datadog RUM 本番導入までの道
shinter61
1
310
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
Java on Azure で LangGraph!
kohei3110
0
170
Create a website using Spatial Web
akkeylab
0
300
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
生成AIで日々のエラー調査を進めたい
yuyaabo
0
630
GraphRAGの仕組みまるわかり
tosuri13
7
470
C++20 射影変換
faithandbrave
0
500
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Being A Developer After 40
akosma
90
590k
Code Review Best Practice
trishagee
68
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Speed Design
sergeychernyshev
31
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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