Lessons learnt from a React performance nightmare

@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 ➔ Inﬁnite 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 ﬁlepattern=”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 ﬁlepattern=”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 ﬁlepattern=”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!

Lessons learnt from a React performance nightmare

Lessons learnt from a React performance nightmare

Chinenye Onuegbu

More Decks by Chinenye Onuegbu

Other Decks in Programming

Featured

Transcript

@xkizer Lessons learnt from a React performance nightmare Chinenye Onuegbu

@xkizer The situation...

@xkizer The situation... ➔ Two experienced JS developers ➔ Newbie

@xkizer

@xkizer The back-office app The situation... ➔ At least 26

@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

@xkizer Data transforms can be problematic Lesson Two

@xkizer <CodeSample ﬁlepattern=”data-transform-*.tsx” /> Data transforms can be problematic

@xkizer Data transforms can be problematic Recommended library: Redux reselect

@xkizer Data Structures are very important! Lesson Three

@xkizer Selected Campaign

@xkizer <CodeSample ﬁlepattern=”active-campaign-*.tsx” /> Data Structures are very important!

@xkizer Data Structures are very important! Data structures that are

@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 ﬁlepattern=”props-passed-*.tsx” /> Prop lifting can compound issues

@xkizer Prop lifting can compound issues Inject props close to

@xkizer Prop lifting can compound issues Pass down only props

@xkizer Micro-optimisations are not important in the grand scheme of

@xkizer Thank You!