title: Two immutable lists - how to make triple equality work?
body: <p>Let's say we have an immutable object that is created using Facebook's great <a href="https://facebook.github.io/immutable-js/" rel="noreferrer">Immutable.js</a>. I want to compare two lists that were produced using <code>.map</code> or <code>.filter</code> out of single source and make sure they are equal. It seems to me, that when using map/filter you are creating a new object that has nothing to do with a previous object. How can I make triple equality <code>===</code> work? Does it make sense at all?</p>
  
  <pre><code>var list = Immutable.List([ 1, 2, 3 ]);
  var list1 = list.map(function(item) { return item; })
  var list2 = list.map(function(item) { return item; })
  
  console.log("LIST1 =", list1.toJS())      // [1, 2, 3]
  console.log("LIST2 =", list2.toJS())      // [1, 2, 3]
  console.log("EQUAL ===?", list1===list2); // false! Why? How?
  </code></pre>
  
  <p>You can play with it here: <a href="http://jsfiddle.net/eo4v1npf/1/" rel="noreferrer">http://jsfiddle.net/eo4v1npf/1/</a></p>
  
  <h2>Context</h2>
  
  <p>I am building application using React + Redux. My state has one list that contains items, that have attribute <code>selected</code>:</p>
  
  <pre><code>items: [
      {id: 1, selected: true},
      {id: 2, selected: false},
      {id: 3, selected: false},
      {id: 4, selected: true}
  ]
  </code></pre>
  
  <p>I want to pass only <strong>selected ids</strong> to another container, so I tried it using simple <code>connect</code>:</p>
  
  <pre><code>function getSelectedIds(items) {
      return items
          .filter((item) =&gt; item.get("selected"))
          .map((item) =&gt;  item.get("id"));
  }
  
  export default connect(
      (state: any) =&gt; ({
          ids: getSelectedIds(state.get("items"))
  })
  )(SomePlainComponent);
  </code></pre>
  
  <p>Problem is, if I set additional attributes:</p>
  
  <pre><code>{id: 1, selected: true, note: "The force is strong with this one"}
  </code></pre>
  
  <p>This causes state to change and <code>SomePlainComponent</code> to rerender, although the list of selected Ids is <em>exactly</em> the same. How do I make sure pure renderer works?</p>
  
  <h2>Edit with some additional info</h2>
  
  <p>For react pure rendering I was using mixin from <a href="https://github.com/gaearon/react-pure-render" rel="noreferrer">react-pure-render</a>:</p>
  
  <pre><code>export default function shouldPureComponentUpdate(nextProps, nextState) {
      return !shallowEqual(this.props, nextProps) ||
             !shallowEqual(this.state, nextState);
  }
  </code></pre>
  
  <p>As it is not aware of props that could be immutable, they are treated as changed, i.e.</p>
  
  <pre><code>this.props = {
      ids: ImmutableList1
  }
  
  nextProps = {
      ids: ImmutableList2
  }
  </code></pre>
  
  <p>Although both attributes <code>ids</code> are equal by content, they are completely different objects and do not pass <code>ImmutableList1 === ImmutableList2</code> test and <code>shouldComponentUpdate</code> returns <code>true</code>. @Gavriel correctly pointed that deep equal would help, but that should be the last resort.</p>
  
  <p>Anyway, I'll just apply accepted solution and problem will be solved, thanks guys! ;)</p>