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
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
610
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
420
エラーって何種類あるの?
kajitack
5
330
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Documentation Writing (for coders)
carmenintech
72
4.9k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
KATA
mclloyd
30
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Side Projects
sachag
455
42k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Why Our Code Smells
bkeepers
PRO
337
57k
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