REACT PERFORMANCE
HOW TO SPEED YOUR APP UP
My name is Kateryna Porshnieva
live in Kiev, Ukraine
work as Front-End Developer & UI/UX designer at YouScan
teach React & Redux course in Ukraine
@krambertech
PART 1:
WHAT MAKES APPS FEEL `FAST`
‣Fast load speed
‣Fast user interactions
‣Smooth animations
PART 2:
FIRST LOAD SPEED
BUNDLE SIZE
1. SET NODE_ENV TO `PRODUCTION`
2. TRANSFORM REACT CONSTANT ELEMENTS
3. INLINE REACT ELEMENTS
4. REMOVE PROPTYPES
5. TRANSFORM PURE CLASS TO FUNCTION
REACT-OPTIMIZE ❤
6. REMOVE UNUSED LOCALES FROM MOMENT.JS
1.98 MB -> 1.24 MB
PART 3:
PERFORMANT UPDATES
- Everyone
“React is fast”
VIRTUAL DOM
React re-renders the whole app on any state (data) change
PART 4:
MEASURING PERFORMANCE
CONSOLE.TIME
CHROME DEVTOOLS ELEMENTS PANE
REACT 15.4 +
CHROME DEVTOOLS TIMELINE
REACT-ADDONS-PERF
FPS-METER
REACT DEVTOOLS +
TRACE REACT UPDATES
PART 5:
OPTIMIZING PERFORMANCE
SHOULDCOMPONENTUPDATE
PURE COMPONENTS
react v15.3 and higher
OPTIMIZING FOR PURE COMPONENTS
1. FUNCTION.BIND / ARROW FUNCTIONS
2. ARRAYS / OBJECTS CREATION
3. MODIFICATION BY REFERENCE
IMMUTABLE.JS
PART 7:
REDUX PERFORMANCE
CONNECT COMPONENTS TO STATE AT LOWER LEVEL
MEMOIZATION
PART 8:
PRETEND WORKING FAST
SPINNERS / PROGRESS BARS
<1s 1-4s >4s
Nothing Spinner Progress bar
OPTIMISTIC UPDATES
Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05
Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05
Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05
VIRTUAL SCROLLING
Image credit: https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209
Image credit: https://bvaughn.github.io/connect-tech-2016/#/8/4
CACHING
PART 9:
WHEN TO OPTIMIZE
FIN.