React: leave the contents of a component alone

reactjs

Solution

Yes, if you don't modify a subtree within React then the DOM won't be touched at all. It's easy to wrap non-React functionality like a Handlebars template in React. You can either use `dangerouslySetInnerHTML`:

render: function() 
    return <div dangerouslySetInnerHTML={{__html: template(values)}}>;
}

or you can simply return an empty div and populate (or attach event handlers, etc) it in componentDidMount:

render: function() 
    return <div />;
},
componentDidMount: function() {
    var node = React.findDOMNode(this);
    node.innerHTML = template(values);
}

In the latter case, React won't touch the DOM after the initial render because `render` always returns the same thing.

Problem

Is it possible to have React ignore a subtree? i.e., don't compare or update it? My use case is migrating to React. Re-writing all our Handlebars templates at once isn't feasible, but if we could use our existing templates for some subcomponents, we could adopt it slowly over time.

Original source