Pure Render Checks

In order to preserve performance one needs to consider the creation of new entities in the render method.

Pure render?

With React.js pure render I mean components that implement the shouldComponentUpdate method with shallow equality checks.

Examples of this are the React.PureComponent, PureRenderMixin, recompose/pure and many others.

Case 1

Bad
  1. class Table extends PureComponent {
  2.   render() {
  3.     return (
  4.       <div>
  5.         {this.props.items.map(i =>
  6.           <Cell data={i} options={this.props.options || []}/>
  7.         )}
  8.       </div>
  9.     );
  10.   }
  11. }

The issue is with {this.props.options || []} - it caused all the cells to be re-rendered even for a single cell change. Why?

You see the options array was passed deep down in the Cell elements. Normally this would not be an issue.
The other Cell elements would not be re-rendered because they can do the cheap shallow equality check and
skip the render entirely but in this case the options prop was null and the default array was used.
As you should know the array literal is the same as new Array() which creates a new array instance.
This completely destroyed every pure render optimization inside the Cell elements.
In Javascript different instances have different identities and thus the shallow equality check always
produces false and tells React to re-render the components.

Good
  1. const defaultval = [];  // <---  The fix (defaultProps could also have been used).
  2. class Table extends PureComponent {
  3.   render() {
  4.     return (
  5.       <div>
  6.         {this.props.items.map(i =>
  7.           <Cell data={i} options={this.props.options || defaultval}/>
  8.         )}
  9.       </div>
  10.     );
  11.   }
  12. }

Case 2

Similar issue with using functions in render() as well

BAD
  1. class App extends PureComponent {
  2.   render() {
  3.     return <MyInput
  4.       onChange={e => this.props.update(e.target.value)}/>;
  5.   }
  6. }
Bad again
  1. class App extends PureComponent {
  2.   update(e) {
  3.     this.props.update(e.target.value);
  4.   }
  6.   render() {
  7.     return <MyInput onChange={this.update.bind(this)}/>;
  8.   }
  9. }

^^In both cases a new function is created with a new identity. Just like with the array literal.
We need to bind the function early

Good
  1. class App extends PureComponent {
  2.   constructor(props) {
  3.     super(props);
  4.     this.update = this.update.bind(this);
  5.   }
  7.   update(e) {
  8.     this.props.update(e.target.value);
  9.   }
  11.   render() {
  12.     return <MyInput onChange={this.update}/>;
  13.   }
  14. }
Bad
  1. class Component extends React.Component {
  2.   state = {clicked: false};
  4.   onClick() {
  5.     this.setState({clicked: true})
  6.   }
  8.   render() {
  9.     // Options object created each render if not set
  10.     const options = this.props.options || {test: 1};
  12.     return <Something
  13.       options={options}
  14.       // New function created each render
  15.       onClick={this.onClick.bind(this)}
  16.       // New function & closure created each render
  17.       onTouchTap={(event) => this.onClick(event)
  18.     />
  19.   }
  20. }
Good
  1. class Component extends React.Component {
  2.   state = {clicked: false};
  3.   options = {test: 1};
  5.   onClick = () => {
  6.     this.setState({clicked: true})
  7.   };
  9.   render() {
  10.     // Options object created once
  11.     const options = this.props.options || this.options;
  13.     return <Something
  14.       options={options}
  15.       onClick={this.onClick} // Function created once, bound once
  16.       onTouchTap={this.onClick} // Function created once, bound once
  17.     />
  18.   }
  19. }

Related links: