React: Parent component re-renders all children, even those that haven't changed on state change
<p>I haven't been able to find a clear answer to this, hope this isn't repetitive.</p>

<p>I am using React + Redux for a simple chat app. The app is comprised of an InputBar, MessageList, and Container component. The Container (as you might imagine) wraps the other two components and is connected to the store. The state of my messages, as well as current message (the message the user is currently typing) is held in the Redux store. Simplified structure:</p>

<pre><code>class ContainerComponent extends Component {
  ...
  render() {
    return (
      &lt;div id="message-container"&gt;
        &lt;MessageList 
          messages={this.props.messages}
        /&gt;
        &lt;InputBar 
          currentMessage={this.props.currentMessage}
          updateMessage={this.props.updateMessage}
          onSubmit={this.props.addMessage}
        /&gt;
      &lt;/div&gt;
    );
  }
}
</code></pre>

<p>The issue I'm having occurs when updating the current message. Updating the current message triggers an action that updates the store, which updates the props passing through container and back to the InputBar component.</p>

<p>This works, however a side effect is that my MessageList component is getting re-rendered every time this happens. MessageList does not receive the current message and doesn't have any reason to update. This is a big issue because once the MessageList becomes big, the app becomes noticeably slower every time current message updates. </p>

<p>I've tried setting and updating the current message state directly within the InputBar component (so completely ignoring the Redux architecture) and that "fixes" the problem, however I would like to stick with Redux design pattern if possible.</p>

<p>My questions are:</p>

<ul>
<li><p>If a parent component is updated, does React always update all the direct children within that component?</p></li>
<li><p>What is the right approach here?</p></li>
</ul>