React Performance Tips & Tricks


Example

When two nodes are not of the same type, React doesn't try to match them - it just removes the first node from the DOM and inserts the second one. This is why the first tip says

  1. If you see yourself alternating between two components classes with very similar output, you may want to make it the same class.

  1. Use shouldComponentUpdate to prevent component from rerender, if you know it is not going to change, for example
shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id; 
}