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/

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.