title: React: unnecessary component update
body: <p>There are 3 react components, two of them inside of the first. The first component contains some state which used only in third component. When I update state from third component with callback react additionally update second component. But second component have no changes. </p>
  
  <p>Why does this happen and how to avoid it?</p>
  
  <p>here is my code:</p>
  
  <pre><code>var app = React.createClass({
      displayName: 'app',
  
      settingsChanged: function (value) {
          console.log('app.settingsChanged');
          this.setState({ settings: { value: value } });
      },
  
      getInitialState: function() {
          return { settings: { value: 1 } }
      },
  
      render: function() {
          return (
              React.createElement('div', null,
                  React.createElement(component1),
                  React.createElement(component2, { settings: this.state.settings, settingsChanged: this.settingsChanged })
              )
          );
      }
  })
  
  var component1 = React.createClass({
      displayName: 'component1',
  
      render: function () {
          console.log('component1.render');
          return (
              React.createElement('div', null, 'component1')
          );
      }
  })
  
  var component2 = React.createClass({
      displayName: 'component2',
  
      tbValueChanged: function(e) {
          this.props.settingsChanged(e.target.value);
      },
  
      render: function () {
          console.log('component2.render');
          return (
              React.createElement('div', null,
                  React.createElement('div', null, 'component2'),
                  React.createElement('input', { value: this.props.settings.value, onChange: this.tbValueChanged })
              )
          );
      }
  })
  </code></pre>
  
  <p>In the console I see this:</p>
  
  <pre><code>component1.render app.js:27
  component2.render app.js:42
  app.settingsChanged app.js:5
  component1.render app.js:27
  component2.render app.js:42
  </code></pre>
  
  <p><a href="http://jsfiddle.net/67m0z3ts/1/" rel="nofollow">http://jsfiddle.net/67m0z3ts/1/</a></p>