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

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.

2f55ef3093479f2bb68b7ec5e1ead838?s=128

Mihai Cîrlănaru

November 08, 2017
Tweet

Transcript

  1. 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
  2. 4.

    Basics What you should know Pitfalls What you should avoid

    Profiling What you should look for Performance Optimizations
  3. 6.

    Component Tree React is FAST Performs the minimum amount of

    operations to update the DOM tree based on state or property changes setState
  4. 7.

    Component Tree Dirty state Components that need updating are marked

    as “dirty” -- i.e. to be rerender Dirty
  5. 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
  6. 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”
  7. 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
  8. 14.

    Reconciliation How React figures out how to efficiently update the

    UI to match the most recent component tree: The Diffing Algorithm
  9. 15.

    Before Diffing Level by level comparison of the component tree

    to find the minimal number of modifications needed after state/prop change After
  10. 17.

    01 Different types • tears down old DOM tree •

    builds a new tree from scratch • MyComponent is remounted
  11. 19.

    02 Same types • keeps same underlying DOM • updates

    the changed attributes • MyComponent does not change
  12. 21.

    03 Recursing on children • First two <li> trees match

    • The only change is the addition of the third <li> tree
  13. 23.

    03 Recursing on children • every child <li> tree will

    be mutated • everything is rebuilt from scratch
  14. 24.
  15. 25.

    keys React uses the key attribute to match children in

    the original tree with children in the subsequent tree
  16. 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())
  17. 31.

    Before • new callback function every render • props change

    for MyComponent • component is rerendered Arrow functions (re)render! BAD
  18. 32.

    Before Arrow functions Define outside of render to ensure they

    are the same from one render to another GOOD
  19. 33.

    { } or [ ] What happens when objects or

    arrays are used inline, as props, for a component Before ?
  20. 34.
  21. 35.

    Before • new array or object every render • props

    change for MyComponent • component is rerendered { } or [ ] (re)render! BAD
  22. 37.

    Changing DOM tree Avoid reconciliation • tears down old DOM

    tree • builds a new tree from scratch • MyComponent is remounted BAD
  23. 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
  24. 40.
  25. 41.