Ways to measure & boost performance of your React app
1 like309 views
The document outlines techniques for improving the performance of React applications, covering aspects such as load speed, user interaction responsiveness, and smooth animations. It details various optimization strategies, including adjusting the Node environment, transforming React components, and employing memoization with Redux. Additionally, it emphasizes the importance of measuring performance and employing user-friendly indicators like spinners to create the illusion of speed.
Ways to measure & boost performance of your React app
- 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
- 6. BUNDLE SIZE
- 7. 1. SET NODE_ENV TO `PRODUCTION`
- 9. 2. TRANSFORM REACT CONSTANT ELEMENTS
- 12. 3. INLINE REACT ELEMENTS
- 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
- 26. - Everyone “React is fast”
- 31. VIRTUAL DOM
- 41. React re-renders the whole app on any state (data) change
- 43. CONSOLE.TIME
- 47. REACT 15.4 + CHROME DEVTOOLS TIMELINE
- 51. FPS-METER
- 53. REACT DEVTOOLS + TRACE REACT UPDATES
- 59. PURE COMPONENTS
- 64. react v15.3 and higher
- 66. 1. FUNCTION.BIND / ARROW FUNCTIONS
- 73. 2. ARRAYS / OBJECTS CREATION
- 80. 3. MODIFICATION BY REFERENCE
- 85. IMMUTABLE.JS
- 87. CONNECT COMPONENTS TO STATE AT LOWER LEVEL
- 93. MEMOIZATION
- 99. SPINNERS / PROGRESS BARS
- 101. <1s 1-4s >4s Nothing Spinner Progress bar
- 102. OPTIMISTIC UPDATES
- 106. VIRTUAL SCROLLING
- 110. CACHING
- 112. FIN.