Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

React Performance: ONE WEIRD TRICK

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Jamison Dance Jamison Dance
April 29, 2016
Programming
210
1

React Performance: ONE WEIRD TRICK

How do you optimize React applications? WITH ONE WEIRD TRICK

Avatar for Jamison Dance

Jamison Dance

April 29, 2016

More Decks by Jamison Dance

See All by Jamison Dance
Community for New Developers
Avatar for Jamison Dance jergason
0
73
Pop Culture, The Pendulum and Progress
Avatar for Jamison Dance jergason
0
140
Rethinking All Practices: Building Web Applications with Elm
Avatar for Jamison Dance jergason
2
220
The Future is Old - Functional Programming in JavaScript
Avatar for Jamison Dance jergason
1
270
Notes From The Future: Beyond Flux
Avatar for Jamison Dance jergason
0
130
nosql and mongodb:  ¯\_(ツ)_/¯
Avatar for Jamison Dance jergason
0
170

Other Decks in Programming

See All in Programming
No More NoSuchMethodError
Avatar for TATSUNO Yasuhiro exoego
1
110
Lambda durable functionsでHuman in the Loopを楽に…楽に……
Avatar for Har1101 har1101
1
200
ActionController meets Protocol Buffers
Avatar for Sorah Fukumori sorah
1
720
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
1.4k
Findy - エンジニア向け会社紹介/Findy Company Deck
Avatar for Findy findyinc
6
400k
HTML-in-Canvasで作る未来のWeb UI表現
Avatar for IKEDA Yasunobu clockmaker
5
5.8k
AIがコードを書いてくれる時代、我々は何を確かめるのか
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
12
4.4k
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
Avatar for MinoDriven minodriven
15
8.8k
PyConTW 2026 - AI Coding 不只是工具升級, 區域醫院醫療資訊系統協作開發與資訊團隊轉型實踐
Avatar for Max Lai cclai999
0
200
FactoryBotをやめればRSpecは速くなるのか？
Avatar for nissyi yuta_onishi_97
0
1.2k
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
170
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
380

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Fireside Chat
Avatar for paigeccino paigeccino
43
4.1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
59k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.6k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
5
54k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
620
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
1
530
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
470
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k

Transcript

  1. React Performance @jergason

  2. BUY React Rally Tickets http://reactrally.com

  3. React Performance

  4. ONE WEIRD TRICK for speeding up your React applications

  5. ONE WEIRD TRICK

  6. ONE WEIRD TRICK Have a deep knowledge of React's rendering

    model and JavaScript execution combined with familiarity with browser and React performance tooling.

  7. 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.

  8. How React Works How Optimization Works Demo

  9. How React Works

  10. setState render render render

  11. dispatch reducer render render render render render render

  12. How Optimization Works

  13. Rules of Optimization 1.Don't 2.Don't yet 3.Profile before optimizing http://c2.com/cgi/wiki?RulesOfOptimization

  14. Optimization In React

  15. Render will be called MANY TIMES

  16. Two Options • call render fewer times • make render

    faster

  17. Demo https://github.com/jergason/slowloris

  18. 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