title: Manual DOM updates and React Component Rendering using forceUpdate()
body: <p>I have a very simple application with a component that wraps two children. It also contains a button that forces a re-renders.</p>
  
  <pre><code>const Hello = () =&gt; &lt;span id="hello"&gt;hello&lt;/span&gt;;
  const World = () =&gt; &lt;span id="world"&gt;world&lt;/span&gt;;
  
  class HelloWorld extends React.Component {
    render() {
      return (
        &lt;div id="hello-world"&gt;
          &lt;Hello /&gt;
          &lt;World /&gt;
          &lt;button onClick={() =&gt; this.forceUpdate()}&gt;re-render&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Using the following code, I can rearrange the DOM, such that <code>Hello</code> comes after <code>World</code></p>
  
  <pre><code>var hello = document.getElementById('hello-world').children[0]
  var world = document.getElementById('hello-world').children[1]
  hello.parentNode.insertBefore(world, hello)
  </code></pre>
  
  <p>When I force a re-render, I expect React to render to the DOM what it has represented in its virtual DOM (<code>Hello World</code>). Instead it continues to render <code>World Hello</code>. Why is this? In what cases will manual DOM updates like this cause problems?</p>