Redux: update only one item in a nested list
<p>I have the components following structure:</p>

<pre><code>&lt;List&gt;

   &lt;Item&gt;
      &lt;DeepList&gt;

          &lt;DeepItem&gt;
              &lt;input type="text" /&gt;
          &lt;DeepItem&gt;

          &lt;DeepItem&gt;
              &lt;input type="text" /&gt;
          &lt;DeepItem&gt;

          // [More DeepItem...]
      &lt;/DeepList&gt;
   &lt;/Item&gt;

   &lt;Item&gt;
      &lt;DeepList&gt;

          &lt;DeepItem&gt;
              &lt;input type="text" /&gt;
          &lt;DeepItem&gt;

          &lt;DeepItem&gt;
              &lt;input type="text" /&gt;
          &lt;DeepItem&gt;

          // [More DeepItem...]
      &lt;/DeepList&gt;
   &lt;/Item&gt;

   // [More Item...]

&lt;/List&gt;
</code></pre>

<p>I chose to flatten my data as suggested <a href="https://github.com/reactjs/redux/issues/994" rel="nofollow">here</a> so it looks like this:</p>

<pre><code>items: {
    "1": {
        id: 1,
        text: "texte item 1...."
        deepItems: [1, 2]
     },
     // [...]
},

deepItems: {
    "1": {
        id: 1,
        text: "texte deep item 1...."
     },
     // [...]
}
</code></pre>

<p>The DeepList component is connected to the "deepItems" property of the store. </p>

<pre><code>const DeepList = React.createClass({

getDeepItems: function() {

    return this.props.specificDeepItems
        .map(id =&gt; {
            return this.props.deepItems[id]
        })
        .map( (item, idx) =&gt; {
            return (
                &lt;DeepItem
                    text    = { item.text }
                    id      = { item.id }
                    key     = { idx }
                /&gt;
            );
        });
},

render: function() {

    return (
        &lt;div&gt;
            { this.getDeepItems() }
        &lt;/div&gt;
    );
}
});

const mapStateToProps = function(store) {

    return {
       deepItems: store.deepItems,
    };
};

export default connect(mapStateToProps)(SimpleTestDeepList);
</code></pre>

<p>The specificDeepItems property is passed down to it by the parent (Item), it's the deepItems field of the Item.</p>

<p>The value of the input is the text field of the deep item. When I type into this input, a "change" function emits an action to update the text field of the corresponding DeepItem in the store.</p>

<p>This works but each time I type a character, every DeepItem are re-rendered not only the one which changed and not only those nested in the same Item!</p>

<p>Is this the expected behaviour or am I doing something wrong here? This does not feel right performance-wise.</p>

<p>Thanks!</p>