React Lightning Talk

Quantifying React Best Practices

Transcript

1. Quantifying React Best Practices Louis Antonelli and Jackson Hamburger
2. Why? •Everyone expects immediately-responsive web applications •Excessive rendering is the cause of many react performance issues •React fundamentals supersede last-minute optimizations
3. The “key” Prop
4. The “key” Prop Me: I’m not really sure what the ‘key’ does. I should really learn about it... Me to me: Just add it blindly and move on
5. The Setup •Comparison of Functional and Pure Components with and without keys on array mutations •Performance avg. over 5k iterations with component render time of 10ms •Functional : •Pure :
6. Legend Re-render nextProps.shallowEqual(props) Re-render !nextProps.shallowEqual(props) Functional Component {props} {nextProps} {nextProps} {props} Mount and Render Pure Component
7. The “key” Prop – Prepending to an Array Pure Components Key No Key name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : a name : b name : c name : d name : e
8. The “key” Prop – Prepending to an Array Pure Components Key ~10.3 milliseconds No Key ~60.3 milliseconds name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : a name : b name : c name : d name : e name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : f – key : 6 name : a name : b name : c name : d name : e name : f
9. The “key” Prop – Prepending to an Array Functional Components Key No Key name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : a name : b name : c name : d name : e
10. The “key” Prop – Prepending to an Array Functional Components Key ~60.1 ms No Key ~60.3 ms name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : a name : b name : c name : d name : e name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : f – key : 6 name : a name : b name : c name : d name : e name : f
11. The “key” Prop – Swapping Array elements Pure Components Key No Key name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : a name : b name : c name : d name : e
12. The “key” Prop – Swapping Array elements Pure Components Key ~1.3 ms No Key ~19.9 ms name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : a name : b name : c name : d name : e name : a – key : 1 name : d – key : 4 name : c – key : 3 name : b – key : 2 name : e – key : 5 name : a name : d name : c name : b name : e
13. The “key” Prop – Swapping Array elements Functional Components Key No Key name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : e – key : 5 name : a name : b name : c name : d name : e
14. The “key” Prop – Swapping Array elements Functional Components Key ~50.4 ms No Key ~50.0 ms name : a – key : 1 name : b – key : 2 name : c – key : 3 name : d – key : 4 name : f – key : 5 name : a name : b name : c name : d name : e name : a – key : 1 name : d – key : 4 name : c – key : 3 name : b – key : 2 name : e – key : 5 name : a name : d name : c name : b name : e
15. Takeaways
16. Takeaways UI = f (state n )
17. Takeaways UI = f (state n ) PerformantUI = f (state n , state n+1 )
18. Thanks Thank you to the organizers and sponsors!