React Performance Optimizations: Best Practices (Hudl Engineering Internal Talk)

React is fast, not only from a learning curve standpoint, but also from its ability to efficiently update the DOM when needed. Nevertheless, there are cases where inefficiencies in the component structure and render logic significantly impact performance and inadvertently user experience. The focus of this talk is on optimizing performance in React applications by highlighting rendering performance basics, pitfalls, and ways to profile performance bottlenecks.

Transcript

1. React Performance Optimizations Best Practices @MCirlanaru
2. Get in touch. Mihai Cîrlănaru Software Engineering Lead @mihai #squad-nomad
3. High Order Components stateless PureComponent shouldComponentUpdate Shallow Compare Immutable data state transition Component tree Diffing Algorithm Profiling Chrome Dev Tools Flame Graph react-addons-perf keys Reconciliation props change ?react_perf Functional components recompose render React
4. Basics What you should know Pitfalls What you should avoid Profiling What you should look for Performance Optimizations
5. 01Basics React Performance Optimizations What you should know
6. Component Tree React is FAST Performs the minimum amount of operations to update the DOM tree based on state or property changes setState
7. Component Tree Dirty state Components that need updating are marked as “dirty” -- i.e. to be rerender Dirty
8. Component Tree Rerender Component sub-trees are rerendered even though some might not have changed at all Rerendered
9. Component Tree Selective sub-tree rendering What if a component sub-tree does not change at all? Dirty
10. Component Tree Selective sub-tree rendering Prevent rerendering of component sub-trees with shouldComponentUpdate Rerendered
11. • control whether a component should be rerendered or not • must be very efficient ◦ it is called all the time ◦ should take less time computing the heuristic than rendering the component shouldComponentUpdate
12. Pure Components • React.Component with a shallow prop and state comparison for shouldComponentUpdate • complex data structures can result in false-negatives for deeper differences • skips prop updates for the whole component subtree -- make sure all the children components are also “pure”
13. Functional Stateless Components • useful for “dumb” presentational components • more predictable and simpler to test • open up possibilities for further performance optimizations ◦ memoization ◦ composition ◦ etc. fn fn fn
14. Reconciliation How React figures out how to efficiently update the UI to match the most recent component tree: The Diffing Algorithm
15. Before Diffing Level by level comparison of the component tree to find the minimal number of modifications needed after state/prop change After
16. 01 Different types
17. 01 Different types • tears down old DOM tree • builds a new tree from scratch • MyComponent is remounted
18. 02 Same types
19. 02 Same types • keeps same underlying DOM • updates the changed attributes • MyComponent does not change
20. 03 Recursing on children
21. 03 Recursing on children • First two <li> trees match • The only change is the addition of the third <li> tree
22. 03 Recursing on children
23. 03 Recursing on children • every child <li> tree will be mutated • everything is rebuilt from scratch
25. keys React uses the key attribute to match children in the original tree with children in the subsequent tree
26. 03 Recursing on children
27. 03 Recursing on children • children elements matched by key • only top <li> tree is added • key only has to be unique among its siblings, not globally unique • keys should be stable and predictable (e.g. no Math.random())
28. 02Pitfalls React Performance Optimizations What you should avoid
29. (re)Render Components with no changes in props or state should not rerender Before After setState
30. Arrow functions What happens when arrow functions are used inline, as props, for a component Before ?
31. Before • new callback function every render • props change for MyComponent • component is rerendered Arrow functions (re)render! BAD
32. Before Arrow functions Define outside of render to ensure they are the same from one render to another GOOD
33. { } or [ ] What happens when objects or arrays are used inline, as props, for a component Before ?
35. Before • new array or object every render • props change for MyComponent • component is rerendered { } or [ ] (re)render! BAD
36. Before { } or [ ] (re)render! GOOD
37. Changing DOM tree Avoid reconciliation • tears down old DOM tree • builds a new tree from scratch • MyComponent is remounted BAD
38. 03Profiling React Performance Optimizations What you should look for
39. • React pre v16 • development mode only • Perf object ◦ start ◦ stop ◦ getLastMeasurements • Pretty print in console ◦ printWasted(measurements) ◦ printInclusive(measurements) react-addons-perf componentWillMount* componentDidUpdate* * or any other relevant method/function
40. • React v15.4+ • development mode only • ?react_perf • User Timing section Chrome Dev Tools
42. Thank you @mihai #squad-nomad