Avoid re-rendering a big list of items with react-redux
<p>I am using redux with react and typescript for my application. I am working with many items used at different places of my app. My state looks like this:</p>

<pre><code>{
    items: {42: {}, 53: {}, ... }, //A large dictionary of items
    itemPage1: {
        itemsId: [ 42, 34, 4 ],
        ...
    },
    itemPage2: { ... 
    },
    ...
}
</code></pre>

<p>The user can modify some attributes of the <code>items</code> dispatching some actions. When this happen I need to redraw the components that have been modified in each pages. The issue is that my items are quite big and I cant afford to redraw all of them at each small modification. I was wondering is this approach would work:</p>

<ul>
<li>I have a fist component <code>&lt;ItemPage1&gt;</code> which connects to the store to get all of the states stored in the tree under <code>itemPage1</code> e.g. the list of items id: <code>itemsId</code>.</li>
<li>Inside <code>&lt;ItemPage1&gt;</code>, I loop over the <code>itemsId</code> property to generate multiple <code>FilterItem</code> components: <code>itemsId.map( itemId =&gt; return &lt;FilterItem id=itemId&gt;);</code></li>
<li><p>Finally each <code>Item</code> is connected using <code>ownProps</code> to get the correct part of the state:</p>

<pre><code>const mapStateToItemProps = (state, ownProps) =&gt; {
    return {
        item: state.items[ownProps.id],
    }
}
const mapDispatchToItemProps = (dispatch, ownProps) =&gt; {
    return null;
}
const FilterItem = connect(
    mapStateToItemProps,
    mapDispatchToItemProps
)(Item)
</code></pre></li>
</ul>

<p>Can you confirm or refute that if I update the item of id 42, then only this item is going to be re-rendered ? </p>