Everything is immutable

client/src/js/components/App.jsx

@@ -6,9 +6,11 @@ var Navigation = Router.Navigation;
 
 var TabList = require('./TabList.jsx');
 var routeActions = require('../actions/route');
+var PureMixin = require('../mixins/pure');
 
 var App = React.createClass({
 	mixins: [
+		PureMixin,
 		Navigation,
 		Reflux.listenTo(routeActions.navigate, 'navigate')
 	],

client/src/js/components/ChatTitle.jsx

@@ -7,9 +7,11 @@ var serverActions = require('../actions/server');
 var channelActions = require('../actions/channel');
 var searchActions = require('../actions/search');
 var privateChatActions = require('../actions/privateChat');
+var PureMixin = require('../mixins/pure');
 
 var ChatTitle = React.createClass({
     mixins: [
+        PureMixin,
         Reflux.listenTo(channelStore, 'channelsChanged'),
         Reflux.listenTo(selectedTabStore, 'selectedTabChanged')
     ],

client/src/js/components/Connect.jsx

@@ -3,8 +3,11 @@ var _ = require('lodash');
 
 var serverActions = require('../actions/server');
 var channelActions = require('../actions/channel');
+var PureMixin = require('../mixins/pure');
 
 var Connect = React.createClass({
+	mixins: [PureMixin],
+
 	getInitialState() {
 		return {
 			showOptionals: false

client/src/js/components/TabList.jsx

@@ -7,9 +7,11 @@ var channelStore = require('../stores/channel');
 var privateChatStore = require('../stores/privateChat');
 var serverStore = require('../stores/server');
 var routeActions = require('../actions/route');
+var PureMixin = require('../mixins/pure');
 
 var TabList = React.createClass({
 	mixins: [
+		PureMixin,
 		Reflux.connect(serverStore, 'servers'),
 		Reflux.connect(channelStore, 'channels'),
 		Reflux.connect(privateChatStore, 'privateChats')
@@ -32,36 +34,41 @@ var TabList = React.createClass({
 	},
 
 	render() {
-		var tabs = this.state.channels.map((server, address) => {
-			var serverTabs = server.map((channel, name) => {
-				return (
-					<TabListItem 
+		var tabs = [];
+
+		this.state.channels.forEach((server, address) => {
+			tabs.push(
+				<TabListItem 
+					key={address}
+					server={address} 
+					channel={null}
+					name={this.state.servers.getIn([address, 'name'])}>
+				</TabListItem>
+			);
+
+			server.forEach((channel, name) => {
+				tabs.push(
+					<TabListItem
+						key={address + name} 
 						server={address} 
 						channel={name}
 						name={name}>
 					</TabListItem>
 				);
-			}).toArray();
-
-			_.each(this.state.privateChats[address], (chat, nick) => {
-				serverTabs.push(
-					<TabListItem 
-						server={address} 
-						channel={nick}
-						name={nick}>
-					</TabListItem>
-				);	
 			});
 
-			serverTabs.unshift(
-				<TabListItem 
-					server={address} 
-					channel={null}
-					name={serverStore.getName(address)}>
-				</TabListItem>
-			);
-
-			return serverTabs;
+			if (this.state.privateChats.has(address)) {
+				this.state.privateChats.get(address).forEach(nick => {
+					tabs.push(
+						<TabListItem 
+							key={address + nick}
+							server={address} 
+							channel={nick}
+							name={nick}>
+						</TabListItem>
+					);
+				});
+			}
 		});
 
 		return (

client/src/js/components/UserList.jsx

@@ -6,9 +6,11 @@ var Infinite = require('react-infinite');
 var UserListItem = require('./UserListItem.jsx');
 var channelStore = require('../stores/channel');
 var selectedTabStore = require('../stores/selectedTab');
+var PureMixin = require('../mixins/pure');
 
 var UserList = React.createClass({
 	mixins: [
+		PureMixin,
 		Reflux.listenTo(channelStore, 'channelsChanged'),
 		Reflux.listenTo(selectedTabStore, 'selectedTabChanged')
 	],
@@ -61,7 +63,7 @@ var UserList = React.createClass({
 			}).toArray(); // React Infinite uses .length
 		}
 
-		if (users.length !== 1) {
+		if (users.length > 1) {
 			return (
 				<div className="userlist" style={style}>
 					<Infinite containerHeight={this.state.height} elementHeight={24}>

client/src/js/components/UserListItem.jsx

@@ -3,8 +3,11 @@ var React = require('react');
 var selectedTabStore = require('../stores/selectedTab');
 var privateChatActions = require('../actions/privateChat');
 var tabActions = require('../actions/tab');
+var PureMixin = require('../mixins/pure');
 
 var UserListItem = React.createClass({
+    mixins: [PureMixin],
+    
 	handleClick() {
 		var server = selectedTabStore.getServer();