Ways to measure & boost performance of your React app
0 likes711 views
The document outlines strategies for improving the performance of React applications, focusing on fast load speed, user interactions, and smooth animations. It includes tips for optimizing bundle size, managing component updates, leveraging memoization in Redux, and measuring performance using tools like Chrome DevTools. The document also discusses the importance of maintaining user perception of speed through techniques such as using spinners and progress bars.
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.