Updating a React component with new data

Question

In a legacy web app, a React component was introduced, let's call it CustomComponent .

updateView(newData) {
  React.render(<CustomComponent data={newData} />, document.querySelector('.custom-component-1'));
}

This works, however for some reason the actual DOM node .custom-component-1 seems to be emptied every time React.render is called on it, defeating the purpose of using React to achieve minimal DOM updates because each time it replaces the contents.

What am I doing wrong?

Answer 1

When you use React.render, React doesn't test the existing virtual DOM against the previous virtual DOM -- it simply re-renders the component.

What you're referring to -- render only when state changes -- occurs on a render method within a component.

Example:

// always renders
React.render(<CustomComponent />, document.querySelector('.custom-component'));

// renders only when state changes
var CustomComponent = React.createClass({
  render() {
    I re-render only if my state changes
  }
});