Building High Performance React Applications

React is built with performance in mind. But when is React slow? In this talk we’ll discuss common bottlenecks in React and when you might be making your program work harder than it should. We will discuss how Best Buy builds components that stay fast, even during the enormous stress of Black Friday traffic. You will learn practical ways to speed up your real world React applications today.

This workshop is for developers curious to learn how to make high performance React applications. You may or may not have already used React, but to get most out of the talk, you should be familiar with the basics of JavaScript.

Transcript

1. BUILDING
 HIGH PERFORMANCE REACT APPLICATIONS @JOEKARLSSON1
2. BUILDING
 HIGH PERFORMANCE REACT APPLICATIONS @JOEKARLSSON1
3. I AM
 JOE KARLSSON @JOEKARLSSON1 @JOEKARLSSON
4. WHY?
5. WHY?
6. MY SITE IS FAST ENOUGH
7. MY SITE IS FAST ENOUGH - No One Ever
8. 40% OF USERS ABANDON AN ARTICLE IF IT DOESN'T LOAD AFTER SIX SECONDS - DANNY BERNSTEIN, GOOGLE
9. +100MS DELAY -1% AMAZON’S SALES Source: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
10. +100MS DELAY -1% AMAZON’S SALES Source: http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html $1,070,000,000
11. OPTIMIZING
 ON THE CLIENT
12. OPTIMIZING
 ON THE CLIENT ‣ SIMPLER THAN OPTIMIZING ON THE SERVER
13. OPTIMIZING
 ON THE CLIENT ‣ SIMPLER THAN OPTIMIZING ON THE SERVER ‣ YOU SEE IMMEDIATE RESULTS
14. OPTIMIZING
 ON THE CLIENT ‣ SIMPLER THAN OPTIMIZING ON THE SERVER ‣ YOU SEE IMMEDIATE RESULTS ‣ MORE "BANG FOR YOUR BUCK"
15. WHY IS REACT SO DANG FAST?
16. WHY IS REACT SO DANG FAST?
17. VIRTUAL DOM
18. DOM UPDATE VIRTUAL DOM DOM
19. DOM UPDATE VIRTUAL DOM DOM
20. DOM UPDATE VIRTUAL DOM DOM
21. DOM UPDATE VIRTUAL DOM DOM
22. DOM UPDATE VIRTUAL DOM DOM
23. DOM UPDATE VIRTUAL DOM DOM
24. READY TO GO FAST?
25. READY TO GO FAST?
26. SHORT
 ANSWER
27. ONLY RENDER WHEN YOU REALLY NEED TO
28. LONG
 ANSWER
29. FIRST, WE NEED TO MEASURE PERFORMANCE
30. FIRST, WE NEED TO MEASURE PERFORMANCE
31. ?react_perf
36. 34 MS
37. USE KEY CORRECTLY
38. USED TO UNIQUELY IDENTIFY AN ELEMENT
39. NEVER USE MATH.RANDOM() OR INDEX DURING A MAP(ELEMENT, INDEX)
42. [ ITEM_A, ITEM_B, ITEM_C, ITEM_D ] 0 1 2 3 DATA INDEX
43. [ NEW_ITEM, ITEM_A, ITEM_B, ITEM_C, ITEM_D ] 0 1 2 3 4 DATA INDEX
46. MANAGE shouldComponentUpdate
47. SPECIFY EXACTLY WHEN A COMPONENT SHOULD RENDER
48. class Item extends Component { render() { return <h3>{ this.props.title }</h3> } };
49. class Item extends Component { shouldComponentUpdate(nextProps, nextState) { if (this.props.title !== nextProps.title) { return true; } return false; } render() { return <h3>{ this.props.title }</h3> } };
54. EXTEND
 ✨ PURECOMPONENT ✨ INSTEAD OF
 COMPONENT
55. EXTEND
 ✨ PURECOMPONENT ✨ INSTEAD OF
 COMPONENT
56. DOES A SHALLOW COMPARISON OF ALL PROPS/STATE
57. { title: ‘Thing name’, author: ‘Joe Karlsson’, favPizzaToppings: [ ‘anchovies’, ‘cheese’ ], twitter: ‘joekarlsson1’ }
58. { title: ‘Thing name’, author: ‘Joe Karlsson’, favPizzaToppings: [ ‘anchovies’, ‘cheese’ ], twitter: ‘joekarlsson1’ }
59. { title: ‘Thing name’, author: ‘Joe Karlsson’, favPizzaToppings: [ ‘anchovies’, ‘cheese’ ], twitter: ‘joekarlsson1’ }
60. class Item extends Component { shouldComponentUpdate(nextProps, nextState) { if (this.props.title !== nextProps.title) { return true; } return false; } render() { return <h3>{ this.props.title }</h3> } };
61. class Item extends PureComponent { render() { return <h3>{ this.props.title }</h3> } };
68. USE IMMUTABLE DATA
69. FANCY WORD FOR MAKING A NEW COPY OF AN OBJECT
70. FANCY WORD FOR MAKING A NEW COPY OF AN OBJECT
71. MAKES TRACKING CHANGES CHEAP Cheap Sonic
72. MAKES TRACKING CHANGES CHEAP Cheap Sonic
73. MEMORY REGISTERS Object 1
74. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud Grunt
75. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud Grunt
76. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud Grunt
77. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud Grunt Object 2 OBJECT 2 Lorem Ipsum
78. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud Grunt Object 2 OBJECT 2 Lorem Ipsum
79. MEMORY REGISTERS Object 1 OBJECT 1 Foo Bar Baz Thud Grunt Object 2 OBJECT 2 Lorem Ipsum
80. BUILD FOR ⚡ PRODUCTION ⚡
81. BUILD FOR ⚡ PRODUCTION ⚡
82. USING 
 RENDERS ~2–8X FASTER THAN THE DEV BUILD NODE_ENV = 'production'
85. USE STATELESS COMPONENTS
87. MORE THOUGHTS ON PERFORMANCE
88. GZIP ALL THE PLAINTEXT
89. WHAT ABOUT IMAGES?
90. PNG & LOSSLESS EVERYONE USES IT
91. ANALYZE YOUR WEBPACK BUNDLE
94. THE MOST IMPORTANT SLIDE
95. MAKE IT WORK,
96. MAKE IT WORK,
97. MAKE IT WORK, THEN MAKE IT FAST
98. ‣ USE KEY CORRECTLY ‣ MANAGE SHOULDCOMPONENTUPDATE ‣ EXTEND ✨PURECOMPONENT ✨ ‣ USE IMMUTABLE DATA ‣ STATELESS COMPONENTS
99. ‣ BUILD FOR ⚡ PRODUCTION ⚡ ‣ ANALYZE WEBPACK BUNDLE ‣ RENDER WHEN REALLY NEEDED ‣ MAKE IT WORK, THEN MAKE IT FAST
100. QUESTIONS?
101. QUESTIONS?
102. THANK YOU!
103. THANK YOU!
104. LET’S STAY IN TOUCH @JOEKARLSSON1 @JOEKARLSSON
105. ‣ BUILDING HIGH PERFORMANCE REACT APPLICATIONS DEMO PROJECT [GITHUB] ‣ WEBPACK BUNDLE ANALYZER [NPM] ‣ OPTIMIZING PERFORMANCE [OFFICAL REACT DOCS] RESOURCES