title: How do you use `reselect` to memoize an array?
body: <p>Suppose I have a redux store with this state structure:</p>
  
  <pre><code>{
    items: {
      "id1" : {
        foo: "foo1",
        bar: "bar1"
      },
      "id2": {
        foo: "foo2",
        bar: "bar2"
      } 
    }
  }
  </code></pre>
  
  <p>This store evolves by receiving full new values of items:</p>
  
  <pre><code>const reduceItems = function(items = {}, action) {
    if (action.type === 'RECEIVE_ITEM') {
      return {
        ...items,
        [action.payload.id]: action.payload,
      };
    }
    return items;
  };
  </code></pre>
  
  <p>I want to display a Root view that renders a list of SubItem views, that only extract a part of the state.
  For example the SubItem view only cares about the foos, and should get it: </p>
  
  <pre><code>function SubItem({ id, foo }) {
    return &lt;div key={id}&gt;{foo}&lt;/div&gt;
  }
  </code></pre>
  
  <p>Since I only care about "subpart" of the states, that's what I want to pass to a "dumb" Root view:</p>
  
  <pre><code>const Root = function({ subitems }) {
    // subitems[0] =&gt; { id: 'id1', foo: "foo1" }
    // subitems[1] =&gt; { id; 'id2', foo : "foo2" }
    const children = subitems.map(SubItem);
    return &lt;div&gt;{children}&lt;/div&gt;;
  };
  </code></pre>
  
  <p>I can easily connect this component to subscribe to changes in the state:</p>
  
  <pre><code>function mapStatesToProps(state) {    
   return {
      subitems: xxxSelectSubItems(state)
   }
  }
  return connect(mapStatesToProps)(Root)
  </code></pre>
  
  <p>My fundamental problem is what happens when the part of the state that I don't care about (<code>bar</code>) changes. 
  Or even, when I receive a new value of an item, where neither <code>foo</code> nor <code>bar</code> has changed:</p>
  
  <pre><code>setInterval(() =&gt; {
      store.dispatch({
        type: 'RECEIVE_ITEM',
        payload: {
          id: 'id1',
          foo: 'foo1',
          bar: 'bar1',
        },
      });
    }, 1000);
  </code></pre>
  
  <p>If I use the "naive" selector implementation:</p>
  
  <pre><code>// naive version
  function toSubItem(id, item) {
    const foo = item.foo;
    return { id, foo };
  }
  
  function dumbSelectSubItems(state) {
    const ids = Object.keys(state.items);
    return ids.map(id =&gt; {
      const item = state.items[id];
      return toSubItem(id, item);
    });
  }
  </code></pre>
  
  <p>Then the list is a completely new object at every called, and my component gets rendered everytime, for nothing.</p>
  
  <p>Of course, if I use a 'constant' selector, that always return the same list, since the connected component is pure, it is re-renderered (but that's just to illustrate connected components are pure): </p>
  
  <pre><code>// fully pure implementation
  const SUBITEMS = [
    {
      id: 'id0',
      foo: 'foo0',
    },
  ];
  function constSelectSubItems(state) {
    return SUBITEMS;
  }
  </code></pre>
  
  <p>Now this gets a bit tricky if I use an "almostConst" version where the List changes, but contains the same element. </p>
  
  <pre><code>const SUBITEM = {
    id: 'id0',
    foo: 'foo0',
  };
  function almostConstSelectSubItems(state) {
    return [SUBITEM];
  }
  </code></pre>
  
  <p>Now, predictably, since the list is different, even though the item inside is the same, the component gets rerendered every second.</p>
  
  <p>This is where I though 'reselect' could help, but I'm wondering if I am not missing the point entirely. I can get <code>reselect</code> to behave using this: </p>
  
  <pre><code>const reselectSelectIds = (state, props) =&gt; Object.keys(state.items);
  const reselectSelectItems = (state, props) =&gt; state.items;
  const reselectSelectSubItems = createSelector([reSelectIds, reSelectItems], (ids, items) =&gt; {
    return ids.map(id =&gt; toSubItem(id, items));
  });
  </code></pre>
  
  <p>But then it behaves exactly like the naive version. </p>
  
  <p>So: </p>
  
  <ul>
  <li>is it pointless to try to memoize an array ? </li>
  <li>can reselect handle this ? </li>
  <li>should I change the organisation of the state ? </li>
  <li>should I just implement shouldComponentUpdate on the Root, using a "deepEqual" test ? </li>
  <li>should I give up on Root being a connected component, and make each LeafItems be connected components themselves ?</li>
  <li>could immutable.js help ?</li>
  <li>is it actually <em>not</em> an issue, because React is smart and will not repaint anything once the virtual-dom is computed ? </li>
  </ul>
  
  <p>It's possible what I'm trying to do his meaningless, and hides an issue in my redux store, so feel free to state obvious errors. </p>