React: leave the contents of a component alone

Question

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.

Answer 1

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.

Answer 2

Have a look at this module. Simple and very effective. https://gist.github.com/alexeisavca/d4ff175fd16c93c8785d

Here's a coffeescript version of it.

module.exports = ReactIgnore = React.createClass
  shouldComponentUpdate: ->
    false
  render: ->
    React.Children.only @props.children

And wrap your component in it:

<ReactIgnore>
  YourComponent
</ReactIgnore>