The techniques that make React fast are not new. We've known for a long time that touching the DOM is expensive, you should batch write and read operations, event delegation is faster...

People still talk about them because in practice, they are very hard to implement in regular JavaScript code. What makes React stand out is that all those optimizations happen by default. This makes it hard to shoot yourself in the foot and make your app slow.

The performance cost model of React is also very simple to understand: every setState re-renders the whole sub-tree. If you want to squeeze out performance, call setState as low as possible and use shouldComponentUpdate to prevent re-rendering an large sub-tree.

Virtual DOM (difference algorithm), event delegation, batched DOM updates all contribute to make React fast out of the box. But if rendering many items, it can still lag! To counter that we can use Immutable.js or RxJS observable.

Example:

http://binarymuse.github.io/react-primer/build/index.html?6

• Make your React app 15x faster
• Optimize ES6 Code For Output Minification (Ninja Tricks Included)
• why-did-you-update
• React+Performance=? by Paul Lewis
• Preventing layout thrashing
• Perf audit for reddit-mobile
• Rendering large datasets with AngularJS and React
• Using MOBservable for FRP
• Optimizing React performance using keys, component lifecycle, and performance tools
• Adventures in React Performance Debugging
• How to Make Your React Apps 15x Faster
• Performance optimisations for React applications
• A DEEP DIVE INTO REACT PERF DEBUGGING

• PERFORMANCE ENGINEERING WITH REACT

1. Browser should render at 60fps which give you 16ms to work with.
2. Forced synchronous layouts

• Do not use array index as key!

Keys are defined in parent components, not in child components.

class StoogeList extends Component {
  render() {
    return (
      <ul>
        {this.props.stooges.map (stooge) => {
          return <Stooge key={stooge.id} />
        }}
      </ul>
    )
  }
}

class Stooge extends Component {
  render() {
    return <li>{ this.props.stooge.name }</li>
  }
}

StoogeList has to specify the keys of each of its children. The Stooge component doesn't need to worry about keys at all, because it's only rendering a single element.

• pure-render-decorator
• Advanced Performance @React blog
• Rendering from the top is bad!

var shallowEqual = require('shallowEqual')

shouldComponentUpdate(nextProps, nextState) {
  return (
    !shallowEqual(this.props, nextProps) ||
    !shallowEqual(this.state, nextState)
  )
}

Or

import shallowCompare from 'react-addons-shallow-compare'

shouldComponentUpdate(nextProps, nextState) {
  return shallowCompare(this, nextProps, nextState)
}

shallowEqual compare the value of the key on first-level only. Deeply nested object cannot use this equality check. Better to Immutable.js for that.

Be mindful of these 2 things:

1. Callback handlers that are bound in render() will always fail shallowEqual. Define your callback in the constructor instead.
2. In addition to event handlers bound in render(), it is probably also worth mentioning that any component which takes jsx children will also always fail shallowEqual, since the children elements will be re-created for every render.

• Speed up Server Side Rendering - Sasha Aickin