title: Parse and Render external HTML in React component
body: <p>I'm writing a React-based application where one of the components receives its HTML content as a string field in props. This content is returned by an API call.</p>
  
  <p>I need to:</p>
  
  <ol>
  <li>Render this content as a standard HTML (i.e. with the styles applied)</li>
  <li>Parse the content to see if the sections within the content have "accept-comments" tag and show a "Comment" button beside the section </li>
  </ol>
  
  <p>For example, if I receive the HTML below, I should show the "Comment" button beside section with id "s101".</p>
  
  <pre><code>&lt;html&gt;
      &lt;head/&gt;
      &lt;body&gt;
          &lt;div id="content"&gt;
              &lt;section id="s101" accept-comments="true"&gt;Some text that needs comments&lt;/section&gt;
              &lt;section id="s102"&gt;Some text that doesn't need comments&lt;/section&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Questions:</p>
  
  <ol>
  <li>What would be the most efficient way to parse and render the HTML as the content can get a bit large, close to 1MB at times?</li>
  <li>How can I ensure that React does not re-render this component as it will not  be updated? I'd assume always return "false" from shouldComponentUpdate().</li>
  </ol>
  
  <p>Things I've tried:</p>
  
  <ol>
  <li>Render the HTML with "dangerouslySetInnerHTML" or "react-html-parser". With this option, cannot parse the "accept-comments" sections.</li>
  <li>Use DOMParser().parseFromString to parse the content. How do I render its output in a React component as HTML? Will this be efficient with 1MB+ content?</li>
  </ol>