title: Immutable.js with React Pure Components
body: <p>I'm having some trouble using React <code>PureComponent</code>s with Immutable.js. Consider the following demo:</p>
  
  <p><a href="https://codepen.io/SandoCalrissian/pen/QaEmeX" rel="nofollow noreferrer">https://codepen.io/SandoCalrissian/pen/QaEmeX</a></p>
  
  <p>In it 2 components are rendered.  The first (<code>NoramlPure</code>) is a normal <code>PureComponent</code> while the second (<code>ImmutablePure</code>) is a normal <code>Component</code> with a custom <code>shouldComponentUpdate</code> that checks props for an <code>equals</code> method.  Both take a single Immutable <code>Map</code> as a prop which is re-formed on every render cycle.  Both also print a message to the console every time they re-render.</p>
  
  <p>I then trigger two render cycles.</p>
  
  <p>I'm expecting both to only render once.  <em>However</em>, the console shows the following:</p>
  
  <pre><code>rendering
      rendering normal pure component
      rendering immutable pure component
  rendering
      rendering normal pure component
  </code></pre>
  
  <p>My custom component works as expected, but the built in <code>PureComponent</code> renders both times (despite getting the same data).</p>
  
  <p>Seeing as React links to Immutable.js <a href="https://reactjs.org/docs/react-api.html#reactpurecomponent" rel="nofollow noreferrer">in the documentation for <code>PureComponent</code></a> (and since they're both made by Facebook) I'd sort of expect the two to work together naturally, but as far as I can tell <code>PureComponent</code>s don't ever call any Immutable.js equality checkers.</p>
  
  <p><strong>Is there any way to make <code>PureComponent</code>s work with Immutable.js objects?
    Or am I stuck using my <code>PureImmutable</code> component as a base-class across my entire project?</strong></p>