title: How is React's Virtual DOM faster than DOM?
body: <p>I understand that React creates a virtual DOM and compares the difference and then just updated the actual element of the real DOM but how is that more efficient if I change it manually? Via <code>getElementById</code> or by using the jQuery function? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;form&gt;
  Select your favorite browser:
  &lt;select id="myList" onchange="myFunction()"&gt;
    &lt;option&gt;&lt;/option&gt;
    &lt;option&gt;Google Chrome&lt;/option&gt;
    &lt;option&gt;Firefox&lt;/option&gt;  
    &lt;option&gt;Internet Explorer&lt;/option&gt;
    &lt;option&gt;Safari&lt;/option&gt;
    &lt;option&gt;Opera&lt;/option&gt;
  &lt;/select&gt;
  &lt;p&gt;Your favorite browser is: &lt;input type="text" id="demo" size="20"&gt;&lt;/p&gt;
  &lt;/form&gt;
  
  &lt;script&gt;
  function myFunction() {
      var mylist = document.getElementById("myList");
      document.getElementById("demo").value = mylist.options[mylist.selectedIndex].text;
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>