React Performance

Below is a dot point list of performance tips for React, will be turned into a proper post when I have time…

From the React Docs

  • Virtualize long lists (a.k.a react-window)
  • Avoid Reconciliation
  • Highlight Updates in React Dev Tools
  • Use PureComponent to prevent unnecessary updates (shallow prop and state comparison)
  • Prevent parent components from unnecessarily updating child components
  • Avoid mutating data
  • Mutating data means that the UI rerenders (reconciliation)
  • Use immutable data structures
    • Immutable data structures makes tracking changes cheap, as we can do shallow comparison of objects
    • Structural sharing?
  • Route Based code splitting
  • Defer unnecessary work until componentDidMount
  • a.k.a API requests, etc.
  • Mounting and unmounting large trees of components is very expensive
  • Defer mounting of large trees, for example use window.requestAnimationFrame
  • Batch actions into a single dispatch (Redux)
  • Redux actions causes rerendering of connected components
  • Reducing the number of actions reduces the wasted rerendering