title: React: How much can I manipulate the DOM React has rendered?
body: <p>This is what I am doing: <a href="http://jsfiddle.net/iamnoah/pTrrw/" rel="nofollow noreferrer">jsfiddle</a> </p>
  
  <p>The critical section is:</p>
  
  <pre><code>position: function() {
    var container = $(this.getDOMNode());
    this._menu = $(this.refs.menu.getDOMNode());
    this._menu.appendTo(document.body).
        offset({
            top: container.offset().top + 
                container.outerHeight(),
            left: container.offset().left
        });
  },
  restore: function() {
    this._menu.appendTo(this.getDOMNode());      
  },
  componentWillUpdate: function() {
    this.restore();
  },
  componentDidUpdate: function() {
    this.position();
  },
  componentDidMount: function() {
    this.position();
  },
  </code></pre>
  
  <p>This works great right now. I put the content back before the component updates on the assumption that React leaves the DOM alone between updates and won't miss it. In fact, React seems to be fine with moving content (if I remove <code>componentWillUpdate</code> and <code>componentDidUpdate</code>, the positioned element still updates!)</p>
  
  <p>My question is how many of the resulting assumptions are safe (i.e., if I assume these things, will my code break in a future version of React?):</p>
  
  <ul>
  <li>React does not care if DOM is moved around between updates as long as you put it back in <code>componentWillUpdate</code>.</li>
  <li>React event handlers will still work on elements that have been moved.</li>
  <li>React will merge any inline styles you ask it with styles already on the element (even if it did not set them.)</li>
  <li>React will update DOM it has rendered, even if you move that DOM somewhere else in the document!</li>
  </ul>
  
  <p>The last one seems somewhat extreme and magical to me, but has some great implications if it holds.</p>