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
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
590
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
4
550
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
190
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
170
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
640
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
750
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
VS Code Update for GitHub Copilot
74th
2
670
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.5k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
710
Hack Claude Code with Claude Code
choplin
5
2.4k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
BBQ
matthewcrist
89
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Documentation Writing (for coders)
carmenintech
72
4.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Designing for Performance
lara
610
69k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Side Projects
sachag
455
42k
GitHub's CSS Performance
jonrohan
1031
460k
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