Ways to measure & boost performance of your React app

In this talk Kateryna will cover ways to measure performance of both entire application and isolated parts of it. We’ll talk about methods to find performance bottlenecks and boost your app's speed up to the sky! Also she will share some tips and techniques on preventing redundant renders and making your components faster.

https://www.meetup.com/NewStore/events/233469319/

Transcript

1. REACT PERFORMANCE HOW TO SPEED YOUR APP UP
2. 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
3. PART 1: WHAT MAKES APPS FEEL `FAST`
4. ‣Fast load speed ‣Fast user interactions ‣Smooth animations
5. PART 2: FIRST LOAD SPEED
6. BUNDLE SIZE
7. 1. SET NODE_ENV TO `PRODUCTION`
9. 2. TRANSFORM REACT CONSTANT ELEMENTS
12. 3. INLINE REACT ELEMENTS
14. 4. REMOVE PROPTYPES
16. 5. TRANSFORM PURE CLASS TO FUNCTION
19. REACT-OPTIMIZE ❤
21. 6. REMOVE UNUSED LOCALES FROM MOMENT.JS
24. 1.98 MB -> 1.24 MB
25. PART 3: PERFORMANT UPDATES
26. - Everyone “React is fast”
31. VIRTUAL DOM
41. React re-renders the whole app on any state (data) change
42. PART 4: MEASURING PERFORMANCE
43. CONSOLE.TIME
45. CHROME DEVTOOLS ELEMENTS PANE
47. REACT 15.4 + CHROME DEVTOOLS TIMELINE
49. REACT-ADDONS-PERF
51. FPS-METER
53. REACT DEVTOOLS + TRACE REACT UPDATES
55. PART 5: OPTIMIZING PERFORMANCE
56. SHOULDCOMPONENTUPDATE
59. PURE COMPONENTS
64. react v15.3 and higher
65. OPTIMIZING FOR PURE COMPONENTS
66. 1. FUNCTION.BIND / ARROW FUNCTIONS
73. 2. ARRAYS / OBJECTS CREATION
80. 3. MODIFICATION BY REFERENCE
85. IMMUTABLE.JS
86. PART 7: REDUX PERFORMANCE
87. CONNECT COMPONENTS TO STATE AT LOWER LEVEL
93. MEMOIZATION
98. PART 8: PRETEND WORKING FAST
99. SPINNERS / PROGRESS BARS
101. <1s 1-4s >4s Nothing Spinner Progress bar
102. OPTIMISTIC UPDATES
103. Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05
104. Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05
105. Image credit: https://uxplanet.org/optimistic-1000-34d9eefe4c05
106. VIRTUAL SCROLLING
107. Image credit: https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209
108. Image credit: https://bvaughn.github.io/connect-tech-2016/#/8/4
110. CACHING
111. PART 9: WHEN TO OPTIMIZE
112. FIN.