How to design a multi tab chat with react/redux?

I am developing a chat platform to take multiple chats and he can switch between the chats.

var MessageList = React.createClass({
   render() {
       return (
          <div className='messages'>
          <h2> Conversation: </h2>
          {
              this.props.messages.map((message, i) => {
                  return (
                      <Message
                          key={i}
                          user={message.user}
                          text={message.text}
                      />
                  );
              })
          }
      </div>
       );
}})

Let's just take an example of message list which will change when user switches the chat tab. Re rendering the same component with new messageList with respect to the chat makes sense but when there are 100 other component changes like this when there is a switch in chat, then there will be lot of repainting/rendering.(I know only diff will be changed in the dom but still.)

I would like to create different elements for different chats and hide and show them based on active chat. But react works under a single dom and replaces the dom with what's returned where it has been attached to.

React.render(<ChatApp/>, document.getElementById('app'));

Can anyone help me up with the design here?

Thanks in advance.