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
Lessons learnt from a React performance nightmare
Search
Chinenye Onuegbu
October 30, 2019
Programming
0
17
Lessons learnt from a React performance nightmare
Presented at ITNEXT SUMMIT in Amsterdam on 30 Oct 2019
Chinenye Onuegbu
October 30, 2019
Tweet
Share
More Decks by Chinenye Onuegbu
See All by Chinenye Onuegbu
Multi-threading in JavaScript
xkizer
0
98
Other Decks in Programming
See All in Programming
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.2k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
140
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
270
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
見た目から始める生産性向上
ikumatadokoro
7
830
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
520
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
60
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Docker and Python
trallard
34
2.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
RailsConf 2023
tenderlove
4
540
Design by the Numbers
sachag
274
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
A Tale of Four Properties
chriscoyier
151
22k
Building Adaptive Systems
keathley
31
1.9k
Done Done
chrislema
178
15k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Transcript
@xkizer Lessons learnt from a React performance nightmare Chinenye Onuegbu
Senior Frontend Engineer, Yilu Amsterdam | October 30, 2019
@xkizer The situation...
@xkizer The situation... ➔ Two experienced JS developers ➔ Newbie
React developers ➔ A back-office application
@xkizer
@xkizer The back-office app The situation... ➔ At least 26
weeks at a time ➔ Up to 50 cards per week ➔ Infinite scrolling ➔ One Redux store ➔ State must be serializable
@xkizer tiny.cc/38iwez Code Samples:
@xkizer Wasted renders are pure evil Lesson One
@xkizer
@xkizer Wasted renders are pure evil Wasted renders are harder
to detect than they sound
@xkizer Data transforms can be problematic Lesson Two
@xkizer <CodeSample filepattern=”data-transform-*.tsx” /> Data transforms can be problematic
@xkizer Data transforms can be problematic Recommended library: Redux reselect
https://github.com/reduxjs/reselect
@xkizer Data Structures are very important! Lesson Three
@xkizer Selected Campaign
@xkizer <CodeSample filepattern=”active-campaign-*.tsx” /> Data Structures are very important!
@xkizer Data Structures are very important! Data structures that are
good for general purpose JS may not be good for React
@xkizer Prop lifting can compound issues Lesson Four
@xkizer
@xkizer Prop lifting can compound issues http://example.com/users/abcd1234 Vs http://example.com/users?username=test&
[email protected]
&userId=abcd1234
@xkizer <CodeSample filepattern=”props-passed-*.tsx” /> Prop lifting can compound issues
@xkizer Prop lifting can compound issues Inject props close to
where they’re needed
@xkizer Prop lifting can compound issues Pass down only props
that can’t be easily derived
@xkizer Micro-optimisations are not important in the grand scheme of
things Worthy mention...
@xkizer Thank You!