title: react immutability helper to render only changed subset of data
body: <p>Please see the example here  <a href="http://jsfiddle.net/8xzxkteu/1/" rel="nofollow">http://jsfiddle.net/8xzxkteu/1/</a></p>
  
  <p>I'm trying to only render part of the data which is changed. In this example, state of component <code>Main</code>, <code>data</code>, is indexed by <code>id</code> and I am using react immutability helper to set only the changed one. But, if you click on the output, it renders all the children, as indicated by the counter. I though using immutability helper react can detect only part of the data changed hence only render it. I probably could use <code>shouldComponentUpdate</code> and compare object values for each child, but is there a better way doing this with immutability helper.</p>
  
  <pre><code> class Child extends React.Component {
      constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this)
        this.state = {
              count: 0
        };
      }
  
      componentWillReceiveProps(nextProps) {
          var count = this.state.count + 1;
          this.setState({ count: count });
      }
  
      onClick() {
          this.props.onClick(this.props.name);
      }
  
      render() {
          return &lt;p onClick={this.onClick}&gt;{this.props.name}: {this.props.value} {this.state.count}&lt;/p&gt;;
      }
    }
  
    class Main extends React.Component{
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this)
        this.state = {
              data: {
                  "a" : "a",
                "b" : "b",
              }
        };
      }
  
      handleChange(id) {
        this.setState({
          data: React.addons.update(this.state.data, { [id]: { $set: 'x' } })
        });
      }  
  
      render() {
        const keys = Object.keys(this.state.data);
          const children = keys.map(k =&gt; {
              return &lt;Child name={k} value={this.state.data[k]} onClick={this.handleChange}/&gt;
          })
          return &lt;div&gt;
              {children}
            &lt;/div&gt;;
      }
    }
  
    React.render(&lt;Main /&gt;, document.getElementById('container'));
  </code></pre>