React gotcha list

React is nice. But due to its complexity, some gotcha is bound to come up in development. Here, I keep a list for future reference.

• this.props.children is an array if there are multiply children, a ReactElement if there's only one children. (V0.13)

  Iterate using the React.Children.forEach method to avoid type detection.

• React's event delegation is bounded to the document.

• componentDidMount is triggered inside-out. The most inner element is mounted first.

• Error: Invariant Violation: addComponentAsRefTo(…): Only a ReactOwner can have refs. (V0.13)

  make sure only one copy of react is included.

• React's render is carried out lazily. setState like crazy is gonna trigger fewer render.
  The following code triggers two render, one on component mount, one for the final setState.

componentDidMount() {
  for (var i = 0; i < 1000; i++) {
  	this.setState({i: i});
  }
}

• Don't use jQuery.data(). If you use jQuery and you want to read data-attribute from a DOM element, dont use jQuery.data. jQuery.data read from internal cache as a priority, and will cache the response from data attribute. React will modify the DOM without jQuery's acknowledge. Use jQuery.attr('data-id') instead.

More To be added.