Improving Performance in React and Redux Applications - Some Quick Wins

 

Intro
Martin McKeaveney

Software Engineer @

The bottleneck

When a component calls `this.setState()`, React re-renders the DOM in two stages:
  1. React’s internal Virtual DOM is re-rendered
  2. The diff between the previous virtual DOM and current DOM is calculated and changes are applied to the actual DOM
If the first step takes too long, re-rendering will be slow.

 

 

Quick Win One - Avoid Unnecessary Re-renders
This is the core principle of pretty much all React performance optimisations.

 

 

 

 

 



  • Allows you to specify if a component renders based on the boolean returned.
  • Default implementation always returns true.
  • Pure components use shallow compare and shouldComponentUpdate.
  • Be careful with this!
  • as of React 15.3, React.PureComponent is a new base class that replaces the need to use Shallow Compare plugin or the Pure Render mixin.

 

 

ShouldComponentUpdate & Pure Components
Higher Order Components

  • We can use HOCs to implement the previous optimisations
  • HoCs are functions that accept a base component and return a new component with additional functionality
  • Cleaner syntax
  • Nice utilities with Recompose

 

Quick Win Two - Redux and connect()


  • connect() is a HOC
  • Takes the redux store as context
  • The connected component is only rendered when the relevant values are changed (shallow compare) - BUT
  • BUT -

- 

Enter Selectors
  • Works like a cache (think memoize in lodash) 
  • Selectors can compute derived data
  • Only recompute when one of their argument functions returns a different value.
  • If changed the transform function is then called, otherwise return the previously computed value.
  • Act as composable functions that can be used in other selectors
Quick Win 3 - The Pure Render Antipattern

  • tl;dr. The anti-pattern is creating new arrays, objects, functions or any other new identities during render or in Redux connect(mapState).
  • In Javascript, different instances have different identities.
  • Shallow equality will produce false and tells React to re-render the components.
  • ie. [] is equivalent to new Array();

 

The Pure Render Antipattern (cont.)
Functions

 

 

 

 

 

 

Arrays
The Pure Render Antipattern (cont.)

We can also avoid binding inside the component by binding in an higher-order component like recompose.withHandlers() or redux.connect()

 

 

 

 

 

 

  • Timeline/Performance tab in Chrome DevTools
  • Records time executing code and time rendering
  • React Render included in code execution time
  • The actual DOM render is included in the rendering part of the timeline
  • You can also make use of the Redux Devtools slider to time your actions and record them.
  • Look for long total times and short self-times. This usually means a React component issue.

 

 

Debugging/Profiling

Chrome DevTools Profiler

Debugging/Profiling

React Perf

To Summarise/Other Tweaks
  • Only optimise when you really need to
  • Keep render() slim (Think functional)
  • Keep comparisons shallow (Immutability)
  • Build for production and use all the plugins - Uglify, define etc.
  • Stateless (functional) components are not any faster than the pure Stateful class (Right Now)
  • Normalise your state, prefer objects by ID as opposed to large nested arrays - O(1)  as opposed to O(n).
  • Rendering in React 15 is roughly 25% faster compared to 0.14
  • Pure components are the fastest. Use shouldComponentUpdate
  • Rendering in development mode is 2–8x slower than rendering in production
  • Rendering in development with React 15 is about 2x slower than 0.14

 

Thanks!

 

Questions? 

 

Links

https://github.com/acdlite/recompose


https://github.com/reactjs/reselect

 

https://facebook.github.io/react/docs/perf.html

 

 

Made with Slides.com