diff --git a/client/coral-admin/src/components/UserDetail.css b/client/coral-admin/src/components/UserDetail.css
index 20e090f47..5cbe0fe32 100644
--- a/client/coral-admin/src/components/UserDetail.css
+++ b/client/coral-admin/src/components/UserDetail.css
@@ -1,6 +1,78 @@
 .copyButton {
-  float: right;
-  top: -10px;
+  background-color: white;
+  border: solid 1px;
+  padding: 2px 6px;
+  height: auto;
+  line-height: initial;
+  min-width: auto;
+  letter-spacing: normal;
+  font-size: 0.9em;
+  margin-left: 10px;
+}
+
+.userDetailList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.userDetailItem {
+  margin: 0 5px;
+  font-weight: 500;
+}
+
+.stats {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  margin: 15px 0 5px;
+  color: #595959;
+}
+
+.stat {
+  margin-right: 20px;
+}
+
+.stat:last-child {
+  margin-right: 0px;
+}
+
+.statItem, .statReportResult {
+  padding: 3px 5px;
+  background-color: #D8D8D8;
+  border-radius: 3px;
+  font-weight: 500;
+  display: block;
+  font-size: 0.9em;
+  line-height: normal;
+  letter-spacing: 0.4px;
+  min-width: 60px; 
+}
+
+.statResult {
+  font-size: 1.5em;
+  padding: 5px 0;
+  display: inline-block;
+}
+
+.statReportResult {
+  color: white;
+  margin: 5px 0;
+  font-weight: 400;
+}
+
+.statReportResult.reliable {
+  background-color: #749C48;
+}
+
+.statReportResult.neutral {
+  background-color: #616161;
+}
+
+.statReportResult.unreliable {
+  background-color: #F44336;
 }
 
 .memberSince {
@@ -8,27 +80,9 @@
 }
 
 .small {
-  color: #aaa;
-}
-
-.stats {
-  display: flex;
-
-  .stat {
-    margin: 0 4px 10px 0px;
-  }
-
-  .stat:last-child {
-    margin-right: 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .stat p:first-child {
-    font-weight: bold;
-  }
+  color: #888888;
+  font-size: 0.9em;
+  letter-spacing: 0.4px;
 }
 
 .profileEmail {
diff --git a/client/coral-admin/src/components/UserDetail.js b/client/coral-admin/src/components/UserDetail.js
index 34773ddef..11cd444e1 100644
--- a/client/coral-admin/src/components/UserDetail.js
+++ b/client/coral-admin/src/components/UserDetail.js
@@ -1,12 +1,16 @@
-import React, {PropTypes} from 'react';
-import Comment from './UserDetailComment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Comment from '../containers/UserDetailComment';
 import styles from './UserDetail.css';
-import {Button, Drawer, Spinner} from 'coral-ui';
+import {Icon, Button, Drawer, Spinner} from 'coral-ui';
 import {Slot} from 'coral-framework/components';
 import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 import {actionsMap} from '../utils/moderationQueueActionsMap';
 import ClickOutside from 'coral-framework/components/ClickOutside';
 import LoadMore from '../components/LoadMore';
+import cn from 'classnames';
+import capitalize from 'lodash/capitalize';
+import {getReliability} from 'coral-framework/utils/user';
 
 export default class UserDetail extends React.Component {
 
@@ -56,6 +60,7 @@ export default class UserDetail extends React.Component {
 
   renderLoaded() {
     const {
+      root,
       root: {
         user,
         totalComments,
@@ -74,13 +79,6 @@ export default class UserDetail extends React.Component {
       loadMore,
     } = this.props;
 
-    const localProfile = user.profiles.find((p) => p.provider === 'local');
-
-    let profile;
-    if (localProfile) {
-      profile = localProfile.id;
-    }
-
     let rejectedPercent = (rejectedComments / totalComments) * 100;
     if (rejectedPercent === Infinity || isNaN(rejectedPercent)) {
 
@@ -94,32 +92,51 @@ export default class UserDetail extends React.Component {
           <h3>{user.username}</h3>
 
           <div>
-            {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-            <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
+            <ul className={styles.userDetailList}>
+              <li>
+                <Icon name="assignment_ind"/>
+                <span className={styles.userDetailItem}>Member Since:</span>
+                {new Date(user.created_at).toLocaleString()}
+              </li>
+
+              {user.profiles.map(({id}) =>
+                <li key={id}>
+                  <Icon name="email"/>
+                  <span className={styles.userDetailItem}>Email:</span>
+                  {id} <ButtonCopyToClipboard className={styles.copyButton} icon="content_copy" copyText={id} />
+                </li>
+              )}
+            </ul>
+
+            <ul className={styles.stats}>
+              <li className={styles.stat}>
+                <span className={styles.statItem}> Total Comments </span>
+                <spam className={styles.statResult}> {totalComments} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reject Rate </spam>
+                <spam className={styles.statResult}> {`${(rejectedPercent).toFixed(1)}%`} </spam>
+              </li>
+              <li className={styles.stat}>
+                <spam className={styles.statItem}> Reports </spam>
+                <spam className={cn(styles.statReportResult, styles[getReliability(user.reliable.flagger)])}>
+                  {capitalize(getReliability(user.reliable.flagger))}
+                </spam>
+              </li>
+            </ul>
+
+            <p className={styles.small}>
+              Data represents the last six months of activity
+            </p>
           </div>
 
           <Slot
             fill="userProfile"
             data={this.props.data}
-            root={this.props.root}
-            user={user}
+            queryData={root, user}
           />
-          <p className={styles.memberSince}><strong>Member since</strong> {new Date(user.created_at).toLocaleString()}</p>
+
           <hr/>
-          <p>
-            <strong>Account summary</strong>
-            <br/><small className={styles.small}>Data represents the last six months of activity</small>
-          </p>
-          <div className={styles.stats}>
-            <div className={styles.stat}>
-              <p>Total Comments</p>
-              <p>{totalComments}</p>
-            </div>
-            <div className={styles.stat}>
-              <p>Reject Rate</p>
-              <p>{`${(rejectedPercent).toFixed(1)}%`}</p>
-            </div>
-          </div>
           {
             selectedCommentIds.length === 0
             ? (
diff --git a/client/coral-admin/src/containers/UserDetail.js b/client/coral-admin/src/containers/UserDetail.js
index edde4b585..e07b47261 100644
--- a/client/coral-admin/src/containers/UserDetail.js
+++ b/client/coral-admin/src/containers/UserDetail.js
@@ -108,7 +108,7 @@ class UserDetailContainer extends React.Component {
       return null;
     }
 
-    const loading = [1, 2, 4].indexOf(this.props.data.networkStatus) >= 0;
+    const loading = this.props.data.loading;
 
     return <UserDetail
       bulkReject={this.bulkReject}
@@ -142,6 +142,9 @@ export const withUserDetailQuery = withQuery(gql`
         id
         provider
       }
+      reliable {
+        flagger
+      }
       ${getSlotFragmentSpreads(slots, 'user')}
     }
     totalComments: commentCount(query: {author_id: $author_id})
diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js
index c6ec0fd4c..1335a8c52 100644
--- a/client/coral-admin/src/routes/Moderation/components/Comment.js
+++ b/client/coral-admin/src/routes/Moderation/components/Comment.js
@@ -20,6 +20,31 @@ import t, {timeago} from 'coral-framework/services/i18n';
 
 class Comment extends React.Component {
 
+  showSuspendUserDialog = () => {
+    const {comment, showSuspendUserDialog} = this.props;
+    return showSuspendUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
+  };
+
+  showBanUserDialog = () => {
+    const {comment, showBanUserDialog} = this.props;
+    return showBanUserDialog({
+      userId: comment.user.id,
+      username: comment.user.username,
+      commentId: comment.id,
+      commentStatus: comment.status,
+    });
+  };
+
+  viewUserDetail = () => {
+    const {viewUserDetail, comment} = this.props;
+    return viewUserDetail(comment.user.id);
+  };
+
   render() {
     const {
       actions = [],
@@ -29,7 +54,12 @@ class Comment extends React.Component {
       bannedWords,
       selected,
       className,
-      ...props
+      data,
+      root,
+      currentUserId,
+      currentAsset,
+      acceptComment,
+      rejectComment,
     } = this.props;
 
     const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
@@ -38,19 +68,7 @@ class Comment extends React.Component {
 
     let selectionStateCSS = selected ? 'mdl-shadow--16dp' : 'mdl-shadow--2dp';
 
-    const showSuspenUserDialog = () => props.showSuspendUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
-
-    const showBanUserDialog = () => props.showBanUserDialog({
-      userId: comment.user.id,
-      username: comment.user.username,
-      commentId: comment.id,
-      commentStatus: comment.status,
-    });
+    const queryData = {root, comment, asset: comment.asset};
 
     return (
       <li
@@ -62,7 +80,7 @@ class Comment extends React.Component {
             <div className={styles.author}>
               {
                 (
-                  <span className={styles.username} onClick={() => viewUserDetail(comment.user.id)}>
+                  <span className={styles.username} onClick={this.viewUserDetail}>
                     {comment.user.username}
                   </span>
                 )
@@ -75,15 +93,15 @@ class Comment extends React.Component {
                 ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
                 : null
               }
-              {props.currentUserId !== comment.user.id &&
+              {currentUserId !== comment.user.id &&
                 <ActionsMenu icon="not_interested">
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={showSuspenUserDialog}>
+                    onClick={this.showSuspendUserDialog}>
                     Suspend User</ActionsMenuItem>
                   <ActionsMenuItem
                     disabled={comment.user.status === 'BANNED'}
-                    onClick={showBanUserDialog}>
+                    onClick={this.showBanUserDialog}>
                     Ban User
                   </ActionsMenuItem>
                 </ActionsMenu>
@@ -91,11 +109,9 @@ class Comment extends React.Component {
               <div className={styles.adminCommentInfoBar}>
                 <CommentType type={commentType} className={styles.commentType}/>
                 <Slot
-                  data={props.data}
-                  root={props.root}
-                  comment={comment}
-                  asset={comment.asset}
                   fill="adminCommentInfoBar"
+                  data={data}
+                  queryData={queryData}
                 />
               </div>
             </div>
@@ -103,7 +119,7 @@ class Comment extends React.Component {
 
           <div className={styles.moderateArticle}>
             Story: {comment.asset.title}
-            {!props.currentAsset &&
+            {!currentAsset &&
               <Link to={`/admin/moderate/${comment.asset.id}`}>{t('modqueue.moderate')}</Link>}
           </div>
           <CommentAnimatedEdit body={comment.body}>
@@ -124,10 +140,9 @@ class Comment extends React.Component {
                 </a>
               </p>
               <Slot
-                data={props.data}
-                root={props.root}
                 fill="adminCommentContent"
-                comment={comment}
+                data={data}
+                queryData={queryData}
               />
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>
@@ -150,30 +165,28 @@ class Comment extends React.Component {
                         acceptComment={() =>
                           (comment.status === 'ACCEPTED'
                             ? null
-                            : props.acceptComment({commentId: comment.id}))}
+                            : acceptComment({commentId: comment.id}))}
                         rejectComment={() =>
                           (comment.status === 'REJECTED'
                             ? null
-                            : props.rejectComment({commentId: comment.id}))}
+                            : rejectComment({commentId: comment.id}))}
                       />
                     );
                   })}
                 </div>
                 <Slot
-                  data={props.data}
-                  root={props.root}
                   fill="adminSideActions"
-                  comment={comment}
+                  data={data}
+                  queryData={queryData}
                 />
               </div>
             </div>
           </CommentAnimatedEdit>
         </div>
         <Slot
-          data={props.data}
-          root={props.root}
           fill="adminCommentDetailArea"
-          comment={comment}
+          data={data}
+          queryData={queryData}
         />
         {flagActions && flagActions.length
           ? <FlagBox
diff --git a/client/coral-admin/src/routes/Moderation/components/Moderation.js b/client/coral-admin/src/routes/Moderation/components/Moderation.js
index f50ff9c50..98a5d5837 100644
--- a/client/coral-admin/src/routes/Moderation/components/Moderation.js
+++ b/client/coral-admin/src/routes/Moderation/components/Moderation.js
@@ -168,8 +168,7 @@ export default class Moderation extends Component {
 
         <Slot
           data={data}
-          root={root}
-          assset={asset}
+          queryData={{root, asset}}
           activeTab={activeTab}
           handleCommentChange={handleCommentChange}
           fill='adminModeration'
diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js
index 8489c809f..1db8f497a 100644
--- a/client/coral-configure/containers/ConfigureStreamContainer.js
+++ b/client/coral-configure/containers/ConfigureStreamContainer.js
@@ -15,7 +15,7 @@ class ConfigureStreamContainer extends Component {
 
     this.state = {
       changed: false,
-      dirtySettings: props.asset.settings,
+      dirtySettings: {...props.asset.settings},
       closedAt: !props.asset.isClosed ? 'open' : 'closed'
     };
 
@@ -48,26 +48,28 @@ class ConfigureStreamContainer extends Component {
           changed: false
         });
       }, 300);
-
-      // this.props.loadAsset(this.props.data.asset);
     }
   }
 
   handleChange (e) {
+    const changes = {};
 
-    // TODO: Don’t directly manipulate state and make state change immutable.
     if (e.target && e.target.id === 'qboxenable') {
-      this.state.dirtySettings.questionBoxEnable = e.target.checked;
+      changes.questionBoxEnable = e.target.checked;
     }
     if (e.target && e.target.id === 'qboxcontent') {
-      this.state.dirtySettings.questionBoxContent = e.target.value;
+      changes.questionBoxContent = e.target.value;
     }
     if (e.target && e.target.id === 'plinksenable') {
-      this.state.dirtySettings.premodLinksEnable = e.target.value;
+      changes.premodLinksEnable = e.target.value;
     }
 
     this.setState({
-      changed: true
+      changed: true,
+      dirtySettings: {
+        ...this.state.dirtySettings,
+        ...changes,
+      },
     });
   }
 
diff --git a/client/coral-embed-stream/src/components/AllCommentsPane.js b/client/coral-embed-stream/src/components/AllCommentsPane.js
index 6c5d6bb23..c141f0618 100644
--- a/client/coral-embed-stream/src/components/AllCommentsPane.js
+++ b/client/coral-embed-stream/src/components/AllCommentsPane.js
@@ -5,7 +5,7 @@ import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import NewCount from './NewCount';
 import {TransitionGroup} from 'react-transition-group';
 import {forEachError} from 'coral-framework/utils';
-import Comment from '../components/Comment';
+import Comment from '../containers/Comment';
 
 const hasComment = (nodes, id) => nodes.some((node) => node.id === id);
 
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index df29ff6ff..bb6fee981 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -16,14 +16,16 @@ import mapValues from 'lodash/mapValues';
 
 import LoadMore from './LoadMore';
 import {getEditableUntilDate} from './util';
+import {findCommentWithId} from '../graphql/utils';
 import {TopRightMenu} from './TopRightMenu';
 import CommentContent from './CommentContent';
 import Slot from 'coral-framework/components/Slot';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import InactiveCommentLabel from './InactiveCommentLabel';
 import {EditableCommentContent} from './EditableCommentContent';
-import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive} from 'coral-framework/utils';
+import {getActionSummary, iPerformedThisAction, forEachError, isCommentActive, getShallowChanges} from 'coral-framework/utils';
 import t from 'coral-framework/services/i18n';
+import CommentContainer from '../containers/Comment';
 
 const isStaff = (tags) => !tags.every((t) => t.tag.name !== 'STAFF');
 const hasTag = (tags, lookupTag) => !!tags.filter((t) => t.tag.name === lookupTag).length;
@@ -72,6 +74,17 @@ const ActionButton = ({children}) => {
   );
 };
 
+// Determine whether the comment with id is in the part of the comments tree.
+function containsCommentId(props, id) {
+  if (props.comment.id === id) {
+    return true;
+  }
+  if (props.comment.replies) {
+    return findCommentWithId(props.comment.replies.nodes, id);
+  }
+  return false;
+}
+
 export default class Comment extends React.Component {
 
   constructor(props) {
@@ -86,7 +99,6 @@ export default class Comment extends React.Component {
       // Whether the comment should be editable (e.g. after a commenter clicking the 'Edit' button on their own comment)
       isEditing: false,
       replyBoxVisible: false,
-      animateEnter: false,
       loadingState: '',
       ...resetCursors({}, props),
     };
@@ -112,20 +124,21 @@ export default class Comment extends React.Component {
     }
   }
 
-  componentWillEnter(callback) {
-    callback();
-    const userId = this.props.currentUser ? this.props.currentUser.id : null;
-    if (this.props.comment.id.indexOf('pending') >= 0) {
-      return;
-    }
-    if (userId && this.props.comment.user.id === userId) {
+  shouldComponentUpdate(nextProps, nextState) {
 
-      // This comment was just added by currentUser.
-      if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
-        return;
+    // Specifically handle `activeReplyBox` if it is the only change.
+    const changes = [...getShallowChanges(this.props, nextProps), ...getShallowChanges(this.state, nextState)];
+    if (changes.length === 1 && changes[0] === 'activeReplyBox') {
+      if (
+        !containsCommentId(this.props, this.props.activeReplyBox) &&
+        !containsCommentId(nextProps, nextProps.activeReplyBox)
+      ) {
+        return false;
       }
     }
-    this.setState({animateEnter: true});
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
   }
 
   static propTypes = {
@@ -244,6 +257,10 @@ export default class Comment extends React.Component {
     return;
   }
 
+  commentPostedHandler = () => {
+    this.props.setActiveReplyBox('');
+  }
+
   // getVisibileReplies returns a list containing comments
   // which were authored by current user or comes before the `idCursor`.
   getVisibileReplies() {
@@ -319,6 +336,7 @@ export default class Comment extends React.Component {
       showSignInDialog,
       liveUpdates,
       commentIsIgnored,
+      animateEnter,
       emit,
       commentClassNames = []
     } = this.props;
@@ -372,7 +390,7 @@ export default class Comment extends React.Component {
       styles[`rootLevel${depth}`],
       {
         ...conditionalClassNames,
-        [styles.enter]: this.state.animateEnter,
+        [styles.enter]: animateEnter,
       },
     );
 
@@ -392,10 +410,13 @@ export default class Comment extends React.Component {
     // props that are passed down the slots.
     const slotProps = {
       data,
+      depth,
+    };
+
+    const queryData = {
       root,
       asset,
       comment,
-      depth,
     };
 
     return (
@@ -409,6 +430,7 @@ export default class Comment extends React.Component {
             className={`${styles.commentAvatar} talk-stream-comment-avatar`}
             fill="commentAvatar"
             {...slotProps}
+            queryData={queryData}
             inline
           />
 
@@ -431,6 +453,7 @@ export default class Comment extends React.Component {
                 className={styles.commentInfoBar}
                 fill="commentInfoBar"
                 {...slotProps}
+                queryData={queryData}
               />
 
               { isActive && (currentUser && (comment.user.id === currentUser.id)) &&
@@ -477,6 +500,7 @@ export default class Comment extends React.Component {
                     fill="commentContent"
                     defaultComponent={CommentContent}
                     {...slotProps}
+                    queryData={queryData}
                   />
                   </div>
               }
@@ -488,6 +512,7 @@ export default class Comment extends React.Component {
                     <Slot
                       fill="commentReactions"
                       {...slotProps}
+                      queryData={queryData}
                       inline
                     />
                     {!disableReply &&
@@ -504,6 +529,7 @@ export default class Comment extends React.Component {
                       fill="commentActions"
                       wrapperComponent={ActionButton}
                       {...slotProps}
+                      queryData={queryData}
                       inline
                     />
                     <ActionButton>
@@ -529,9 +555,7 @@ export default class Comment extends React.Component {
 
         {activeReplyBox === comment.id
           ? <ReplyBox
-              commentPostedHandler={() => {
-                setActiveReplyBox('');
-              }}
+              commentPostedHandler={this.commentPostedHandler}
               charCountEnable={charCountEnable}
               maxCharCount={maxCharCount}
               setActiveReplyBox={setActiveReplyBox}
@@ -547,7 +571,7 @@ export default class Comment extends React.Component {
         {view.map((reply) => {
           return commentIsIgnored(reply)
             ? <IgnoredCommentTombstone key={reply.id} />
-            : <Comment
+            : <CommentContainer
                 data={this.props.data}
                 root={this.props.root}
                 setActiveReplyBox={setActiveReplyBox}
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index f918b7a16..a74028627 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -28,7 +28,7 @@ export default class Embed extends React.Component {
   };
 
   render() {
-    const {activeTab, commentId, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog} = this.props;
+    const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog} = this.props;
     const {user} = this.props.auth;
     const hasHighlightedComment = !!commentId;
 
@@ -64,14 +64,18 @@ export default class Embed extends React.Component {
             </Tab>
           }
         </TabBar>
-        <Slot fill="embed" />
+        <Slot
+          data={data}
+          queryData={{root}}
+          fill="embed"
+        />
 
         <TabContent
           activeTab={activeTab}
           id='talk-embed-stream-tab-content'
         >
           <TabPane tabId={'stream'}>
-            <Stream data={this.props.data} root={this.props.root} />
+            <Stream data={data} root={root} />
           </TabPane>
           <TabPane tabId={'profile'}>
             <ProfileContainer />
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index 8fe373859..b37d232f7 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {StreamError} from './StreamError';
-import Comment from '../components/Comment';
+import Comment from '../containers/Comment';
 import SuspendedAccount from './SuspendedAccount';
 import Slot from 'coral-framework/components/Slot';
 import InfoBox from 'talk-plugin-infobox/InfoBox';
@@ -10,16 +10,16 @@ import {ModerationLink} from 'talk-plugin-moderation';
 import RestrictedMessageBox
   from 'coral-framework/components/RestrictedMessageBox';
 import t, {timeago} from 'coral-framework/services/i18n';
-import {getSlotComponents} from 'coral-framework/helpers/plugins';
 import CommentBox from 'talk-plugin-commentbox/CommentBox';
 import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
 import {isCommentActive} from 'coral-framework/utils';
-import {Button, TabBar, Tab, TabCount, TabContent, TabPane} from 'coral-ui';
+import {Button, Tab, TabCount, TabPane} from 'coral-ui';
 import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
 import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
+import StreamTabPanel from '../containers/StreamTabPanel';
 
 import styles from './Stream.css';
 
@@ -35,46 +35,20 @@ class Stream extends React.Component {
   componentWillReceiveProps(next) {
 
     // Keep comment box when user was live suspended, banned, ...
-    if (!this.userIsDegraged(this.props) && this.userIsDegraged(next)) {
+    if (!this.props.userIsDegraged && next.userIsDegraged) {
       this.setState({keepCommentBox: true});
     }
-
-    this.fallbackAllTab(next);
   }
 
-  componentDidMount() {
-    this.fallbackAllTab();
-  }
-
-  fallbackAllTab(props = this.props) {
-    if (props.activeStreamTab !== 'all') {
-      const slotPlugins = this.getSlotComponents('streamTabs', props).map((c) => c.talkPluginName);
-      if (slotPlugins.indexOf(props.activeStreamTab) === -1) {
-        props.setActiveStreamTab('all');
-      }
-    }
-  }
-
-  getSlotProps({data, root, root: {asset}} = this.props) {
-    return {data, root, asset};
-  }
-
-  getSlotComponents(slot, props = this.props) {
-    return getSlotComponents(slot, props.reduxState, this.getSlotProps(props));
-  }
-
-  setActiveReplyBox = (id) => {
-    if (!this.props.auth.user) {
-      this.props.showSignInDialog();
-    } else {
-      this.props.setActiveReplyBox(id);
-    }
+  commentIsIgnored = (comment) => {
+    const me = this.props.root.me;
+    return (
+      me &&
+      me.ignoredUsers &&
+      me.ignoredUsers.find((u) => u.id === comment.user.id)
+    );
   };
 
-  userIsDegraged({auth: {user}} = this.props) {
-    return !can(user, 'INTERACT_WITH_COMMUNITY');
-  }
-
   render() {
     const {
       data,
@@ -83,7 +57,7 @@ class Stream extends React.Component {
       setActiveReplyBox,
       appendItemArray,
       commentClassNames,
-      root: {asset, asset: {comment, comments, totalCommentCount}, me},
+      root: {asset, asset: {comment, comments, totalCommentCount}},
       postComment,
       addNotification,
       editComment,
@@ -125,16 +99,9 @@ class Stream extends React.Component {
       user.suspension.until &&
       new Date(user.suspension.until) > new Date();
 
-    const commentIsIgnored = (comment) => {
-      return (
-        me &&
-        me.ignoredUsers &&
-        me.ignoredUsers.find((u) => u.id === comment.user.id)
-      );
-    };
-
     const showCommentBox = loggedIn && ((!banned && !temporarilySuspended && !highlightedComment) || keepCommentBox);
-    const slotProps = this.getSlotProps();
+    const slotProps = {data};
+    const slotQueryData = {root, asset};
 
     if (!comment && !comments) {
       console.error('Talk: No comments came back from the graph given that query. Please, check the query params.');
@@ -196,6 +163,7 @@ class Stream extends React.Component {
 
         <Slot
           fill="stream"
+          queryData={slotQueryData}
           {...slotProps}
         />
 
@@ -230,7 +198,7 @@ class Stream extends React.Component {
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
                 key={highlightedComment.id}
-                commentIsIgnored={commentIsIgnored}
+                commentIsIgnored={this.commentIsIgnored}
                 comment={highlightedComment}
                 charCountEnable={asset.settings.charCountEnable}
                 maxCharCount={asset.settings.charCount}
@@ -246,58 +214,54 @@ class Stream extends React.Component {
               >
                 <Slot
                   fill="streamFilter"
+                  queryData={slotQueryData}
                   {...slotProps}
                 />
               </div>
-              <TabBar activeTab={activeStreamTab} onTabClick={setActiveStreamTab} sub>
-                {this.getSlotComponents('streamTabs').map((PluginComponent) => (
-                  <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
-                    <PluginComponent
-                      {...slotProps}
-                      active={activeStreamTab === PluginComponent.talkPluginName}
-                    />
+              <StreamTabPanel
+                activeTab={activeStreamTab}
+                setActiveTab={setActiveStreamTab}
+                fallbackTab={'all'}
+                tabSlot={'streamTabs'}
+                tabPaneSlot={'streamTabPanes'}
+                slotProps={slotProps}
+                queryData={slotQueryData}
+                appendTabs={
+                  <Tab tabId={'all'} key='all'>
+                    All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
                   </Tab>
-                ))}
-                <Tab tabId={'all'}>
-                  All Comments <TabCount active={activeStreamTab === 'all'} sub>{totalCommentCount}</TabCount>
-                </Tab>
-              </TabBar>
-              <TabContent activeTab={activeStreamTab} sub>
-                {this.getSlotComponents('streamTabPanes').map((PluginComponent) => (
-                  <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
-                    <PluginComponent
-                      {...slotProps}
+                }
+                appendTabPanes={
+                  <TabPane tabId={'all'} key='all'>
+                    <AllCommentsPane
+                      data={data}
+                      root={root}
+                      comments={comments}
+                      commentClassNames={commentClassNames}
+                      ignoreUser={ignoreUser}
+                      setActiveReplyBox={setActiveReplyBox}
+                      activeReplyBox={activeReplyBox}
+                      addNotification={addNotification}
+                      disableReply={!open}
+                      postComment={postComment}
+                      asset={asset}
+                      currentUser={user}
+                      postFlag={postFlag}
+                      postDontAgree={postDontAgree}
+                      loadMore={loadMoreComments}
+                      loadNewReplies={loadNewReplies}
+                      deleteAction={deleteAction}
+                      showSignInDialog={showSignInDialog}
+                      commentIsIgnored={this.commentIsIgnored}
+                      charCountEnable={asset.settings.charCountEnable}
+                      maxCharCount={asset.settings.charCount}
+                      editComment={editComment}
+                      emit={emit}
                     />
                   </TabPane>
-                ))}
-                <TabPane tabId={'all'}>
-                  <AllCommentsPane
-                    data={data}
-                    root={root}
-                    comments={comments}
-                    commentClassNames={commentClassNames}
-                    ignoreUser={ignoreUser}
-                    setActiveReplyBox={setActiveReplyBox}
-                    activeReplyBox={activeReplyBox}
-                    addNotification={addNotification}
-                    disableReply={!open}
-                    postComment={postComment}
-                    asset={asset}
-                    currentUser={user}
-                    postFlag={postFlag}
-                    postDontAgree={postDontAgree}
-                    loadMore={loadMoreComments}
-                    loadNewReplies={loadNewReplies}
-                    deleteAction={deleteAction}
-                    showSignInDialog={showSignInDialog}
-                    commentIsIgnored={commentIsIgnored}
-                    charCountEnable={asset.settings.charCountEnable}
-                    maxCharCount={asset.settings.charCount}
-                    editComment={editComment}
-                    emit={emit}
-                  />
-                </TabPane>
-              </TabContent>
+                }
+                sub
+              />
             </div>
           }
       </div>
diff --git a/client/coral-embed-stream/src/components/StreamTabPanel.js b/client/coral-embed-stream/src/components/StreamTabPanel.js
new file mode 100644
index 000000000..0f2092092
--- /dev/null
+++ b/client/coral-embed-stream/src/components/StreamTabPanel.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import {TabBar, TabContent} from 'coral-ui';
+import PropTypes from 'prop-types';
+
+class StreamTabPanel extends React.Component {
+
+  render() {
+    const {activeTab, setActiveTab, tabs, tabPanes, sub} = this.props;
+    return (
+      <div>
+        <TabBar activeTab={activeTab} onTabClick={setActiveTab} sub={sub}>
+          {tabs}
+        </TabBar>
+        <TabContent activeTab={activeTab} sub={sub}>
+          {tabPanes}
+        </TabContent>
+      </div>
+    );
+  }
+}
+
+StreamTabPanel.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  tabs: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  tabPanes: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  className: PropTypes.string,
+  sub: PropTypes.bool,
+};
+
+export default StreamTabPanel;
diff --git a/client/coral-embed-stream/src/components/Toggleable.js b/client/coral-embed-stream/src/components/Toggleable.js
index 49f2a701b..a65e8212c 100644
--- a/client/coral-embed-stream/src/components/Toggleable.js
+++ b/client/coral-embed-stream/src/components/Toggleable.js
@@ -19,7 +19,9 @@ export default class Toggleable extends React.Component {
   }
 
   close = () => {
-    this.setState({isOpen: false});
+    if (this.state.isOpen) {
+      this.setState({isOpen: false});
+    }
   }
 
   render() {
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 5d43e9eb7..005a24ae1 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -1,7 +1,11 @@
-import {gql} from 'react-apollo';
+import {gql, compose} from 'react-apollo';
+import React from 'react';
 import Comment from '../components/Comment';
 import {withFragments} from 'coral-framework/hocs';
 import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {THREADING_LEVEL} from '../constants/stream';
+import hoistStatics from 'recompose/hoistStatics';
+import {nest} from '../graphql/utils';
 
 const slots = [
   'streamQuestionArea',
@@ -14,7 +18,75 @@ const slots = [
   'commentAvatar'
 ];
 
-export default withFragments({
+/**
+ * withAnimateEnter is a HOC that passes a property `animateEnter` to the
+ * underlying BaseComponent. It must be a direct child of a `TransitionGroup`
+ * from https://github.com/reactjs/react-transition-group and as such must
+ * be the uppermost HOC applied to the BaseComponent.
+ */
+const withAnimateEnter = hoistStatics((BaseComponent) => {
+  class WithAnimateEnter extends React.Component {
+    state = {
+      animateEnter: false,
+    };
+
+    componentWillEnter(callback) {
+      callback();
+      const userId = this.props.currentUser ? this.props.currentUser.id : null;
+      if (this.props.comment.id.indexOf('pending') >= 0) {
+        return;
+      }
+      if (userId && this.props.comment.user.id === userId) {
+
+        // This comment was just added by currentUser.
+        if (Date.now() - Number(new Date(this.props.comment.created_at)) < 30 * 1000) {
+          return;
+        }
+      }
+      this.setState({animateEnter: true});
+    }
+
+    render() {
+      return <BaseComponent
+        {...this.props}
+        animateEnter={this.state.animateEnter}
+      />;
+    }
+  }
+  return WithAnimateEnter;
+});
+
+const singleCommentFragment = gql`
+  fragment CoralEmbedStream_Comment_SingleComment on Comment {
+    id
+    body
+    created_at
+    status
+    replyCount
+    tags {
+      tag {
+        name
+      }
+    }
+    user {
+      id
+      username
+    }
+    action_summaries {
+      __typename
+      count
+      current_user {
+        id
+      }
+    }
+    editing {
+      edited
+      editableUntil
+    }
+  }
+`;
+
+const withCommentFragments = withFragments({
   root: gql`
     fragment CoralEmbedStream_Comment_root on RootQuery {
       __typename
@@ -29,32 +101,27 @@ export default withFragments({
     `,
   comment: gql`
     fragment CoralEmbedStream_Comment_comment on Comment {
-      id
-      body
-      created_at
-      status
-      replyCount
-      tags {
-        tag {
-          name
+      ...CoralEmbedStream_Comment_SingleComment
+      ${nest(`
+        replies(limit: 3, excludeIgnored: $excludeIgnored) {
+          nodes {
+            ...CoralEmbedStream_Comment_SingleComment
+            ...nest
+          }
+          hasNextPage
+          startCursor
+          endCursor
         }
-      }
-      user {
-        id
-        username
-      }
-      action_summaries {
-        __typename
-        count
-        current_user {
-          id
-        }
-      }
-      editing {
-        edited
-        editableUntil
-      }
+      `, THREADING_LEVEL)}
       ${getSlotFragmentSpreads(slots, 'comment')}
     }
+    ${singleCommentFragment}
   `
-})(Comment);
+});
+
+const enhance = compose(
+  withAnimateEnter,
+  withCommentFragments,
+);
+
+export default enhance(Comment);
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index e21a683d1..731cab264 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -11,7 +11,7 @@ import {Spinner} from 'coral-ui';
 import * as authActions from 'coral-framework/actions/auth';
 import * as assetActions from 'coral-framework/actions/asset';
 import pym from 'coral-framework/services/pym';
-import {getDefinitionName} from 'coral-framework/utils';
+import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {withQuery} from 'coral-framework/hocs';
 import Embed from '../components/Embed';
 import Stream from './Stream';
@@ -146,12 +146,17 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
   }
 `;
 
+const slots = [
+  'embed',
+];
+
 const EMBED_QUERY = gql`
   query CoralEmbedStream_Embed($assetId: ID, $assetUrl: String, $commentId: ID!, $hasComment: Boolean!, $excludeIgnored: Boolean) {
     me {
       id
       status
     }
+    ${getSlotFragmentSpreads(slots, 'root')}
     ...${getDefinitionName(Stream.fragments.root)}
   }
   ${Stream.fragments.root}
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index de05f27b6..be6c000e0 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -16,6 +16,7 @@ import Comment from './Comment';
 import {withFragments, withEmit} from 'coral-framework/hocs';
 import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils';
 import {Spinner} from 'coral-ui';
+import {can} from 'coral-framework/services/perms';
 import {
   findCommentInEmbedQuery,
   insertCommentIntoEmbedQuery,
@@ -23,7 +24,6 @@ import {
   insertFetchedCommentsIntoEmbedQuery,
   nest,
 } from '../graphql/utils';
-import omit from 'lodash/omit';
 
 const {showSignInDialog, editName} = authActions;
 const {addNotification} = notificationActions;
@@ -140,8 +140,16 @@ class StreamContainer extends React.Component {
     clearInterval(this.countPoll);
   }
 
+  userIsDegraged({auth: {user}} = this.props) {
+    return !can(user, 'INTERACT_WITH_COMMUNITY');
+  }
+
   render() {
-    if (this.props.refetching) {
+    if (this.props.refetching
+      || !this.props.root.asset
+      || !this.props.root.asset.comment
+      && !this.props.root.asset.comments
+    ) {
       return <Spinner />;
     }
     return <Stream
@@ -149,6 +157,7 @@ class StreamContainer extends React.Component {
       loadMore={this.loadMore}
       loadMoreComments={this.loadMoreComments}
       loadNewReplies={this.loadNewReplies}
+      userIsDegraged={this.userIsDegraged()}
     />;
   }
 }
@@ -156,19 +165,11 @@ class StreamContainer extends React.Component {
 const commentFragment = gql`
   fragment CoralEmbedStream_Stream_comment on Comment {
     id
+    status
+    user {
+      id
+    }
     ...${getDefinitionName(Comment.fragments.comment)}
-    ${nest(`
-      replies(excludeIgnored: $excludeIgnored) {
-        nodes {
-          id
-          ...${getDefinitionName(Comment.fragments.comment)}
-          ...nest
-        }
-        hasNextPage
-        startCursor
-        endCursor
-      }
-    `, THREADING_LEVEL)}
   }
   ${Comment.fragments.comment}
 `;
@@ -205,27 +206,14 @@ const LOAD_MORE_QUERY = gql`
   query CoralEmbedStream_LoadMoreComments($limit: Int = 5, $cursor: Cursor, $parent_id: ID, $asset_id: ID, $sort: SORT_ORDER, $excludeIgnored: Boolean) {
     comments(query: {limit: $limit, cursor: $cursor, parent_id: $parent_id, asset_id: $asset_id, sort: $sort, excludeIgnored: $excludeIgnored}) {
       nodes {
-        id
-        ...${getDefinitionName(Comment.fragments.comment)}
-        ${nest(`
-          replies(limit: 3, excludeIgnored: $excludeIgnored) {
-            nodes {
-              id
-              ...${getDefinitionName(Comment.fragments.comment)}
-              ...nest
-            }
-            hasNextPage
-            startCursor
-            endCursor
-          }
-        `, THREADING_LEVEL)}
+        ...CoralEmbedStream_Stream_comment
       }
       hasNextPage
       startCursor
       endCursor
     }
   }
-  ${Comment.fragments.comment}
+  ${commentFragment}
 `;
 
 const slots = [
@@ -310,7 +298,6 @@ const mapStateToProps = (state) => ({
   previousStreamTab: state.stream.previousTab,
   commentClassNames: state.stream.commentClassNames,
   pluginConfig: state.config.plugin_config,
-  reduxState: omit(state, 'apollo'),
 });
 
 const mapDispatchToProps = (dispatch) =>
diff --git a/client/coral-embed-stream/src/containers/StreamTabPanel.js b/client/coral-embed-stream/src/containers/StreamTabPanel.js
new file mode 100644
index 000000000..7b91d58ee
--- /dev/null
+++ b/client/coral-embed-stream/src/containers/StreamTabPanel.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import StreamTabPanel from '../components/StreamTabPanel';
+import {connect} from 'react-redux';
+import omit from 'lodash/omit';
+import {getSlotComponents, getSlotComponentProps} from 'coral-framework/helpers/plugins';
+import {Tab, TabPane} from 'coral-ui';
+import {getShallowChanges} from 'coral-framework/utils';
+import isEqual from 'lodash/isEqual';
+import PropTypes from 'prop-types';
+
+class StreamTabPanelContainer extends React.Component {
+
+  componentDidMount() {
+    this.fallbackAllTab();
+  }
+
+  componentWillReceiveProps(next) {
+    this.fallbackAllTab(next);
+  }
+
+  shouldComponentUpdate(next) {
+
+    // Prevent Slot from rerendering when only reduxState has changed and
+    // it does not result in a change of slot children.
+    const changes = getShallowChanges(this.props, next);
+    if (changes.length === 1 && changes[0] === 'reduxState') {
+      const prevUuid = this.getSlotComponents(this.props.tabSlot, this.props).map((cmp) => cmp.talkUuid);
+      const nextUuid = this.getSlotComponents(next.tabSlot, next).map((cmp) => cmp.talkUuid);
+      return !isEqual(prevUuid, nextUuid);
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
+  fallbackAllTab(props = this.props) {
+    if (props.activeTab !== props.fallbackTab) {
+      const slotPlugins = this.getSlotComponents(props.tabSlot, props).map((c) => c.talkPluginName);
+      if (slotPlugins.indexOf(props.activeTab) === -1) {
+        props.setActiveTab(props.fallbackTab);
+      }
+    }
+  }
+
+  getSlotComponents(slot, props = this.props) {
+    return getSlotComponents(slot, props.reduxState, props.slotProps, props.queryData);
+  }
+
+  getPluginTabElements(props = this.props) {
+    return this.getSlotComponents(props.tabSlot).map((PluginComponent) => (
+      <Tab tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+        <PluginComponent
+          {...getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData)}
+          active={this.props.activeTab === PluginComponent.talkPluginName}
+        />
+      </Tab>
+    ));
+  }
+
+  getPluginTabPaneElements(props = this.props) {
+    return this.getSlotComponents(props.tabPaneSlot).map((PluginComponent) => (
+      <TabPane tabId={PluginComponent.talkPluginName} key={PluginComponent.talkPluginName}>
+        <PluginComponent
+          {...getSlotComponentProps(PluginComponent, props.reduxState, props.slotProps, props.queryData)}
+        />
+      </TabPane>
+    ));
+  }
+
+  render() {
+    return (
+      <StreamTabPanel
+        className={this.props.className}
+        activeTab={this.props.activeTab}
+        setActiveTab={this.props.setActiveTab}
+        tabs={this.getPluginTabElements().concat(this.props.appendTabs)}
+        tabPanes={this.getPluginTabPaneElements().concat(this.props.appendTabPanes)}
+        sub={this.props.sub}
+      />
+    );
+  }
+}
+
+StreamTabPanelContainer.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  appendTabs: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  appendTabPanes: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element)
+  ]),
+  fallbackTab: PropTypes.string.isRequired,
+  tabSlot: PropTypes.string.isRequired,
+  tabPaneSlot: PropTypes.string.isRequired,
+  slotProps: PropTypes.object.isRequired,
+  queryData: PropTypes.object,
+  className: PropTypes.string,
+  sub: PropTypes.bool,
+};
+
+const mapStateToProps = (state) => ({
+  reduxState: omit(state, 'apollo'),
+});
+
+export default connect(mapStateToProps, null)(StreamTabPanelContainer);
diff --git a/client/coral-embed-stream/src/graphql/utils.js b/client/coral-embed-stream/src/graphql/utils.js
index ac6298616..11d3d411b 100644
--- a/client/coral-embed-stream/src/graphql/utils.js
+++ b/client/coral-embed-stream/src/graphql/utils.js
@@ -117,7 +117,7 @@ export function getTopLevelParent(comment) {
   return comment;
 }
 
-function findComment(nodes, callback) {
+export function findComment(nodes, callback) {
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
     if (callback(node)) {
@@ -133,6 +133,10 @@ function findComment(nodes, callback) {
   return false;
 }
 
+export function findCommentWithId(nodes, id) {
+  return findComment(nodes, (node) => node.id === id);
+}
+
 export function findCommentInEmbedQuery(root, callbackOrId) {
   let callback = callbackOrId;
   if (typeof callbackOrId === 'string') {
diff --git a/client/coral-framework/components/IfSlotIsEmpty.js b/client/coral-framework/components/IfSlotIsEmpty.js
index 424a59bc7..e9211fc57 100644
--- a/client/coral-framework/components/IfSlotIsEmpty.js
+++ b/client/coral-framework/components/IfSlotIsEmpty.js
@@ -3,13 +3,36 @@ import {connect} from 'react-redux';
 import {isSlotEmpty} from 'coral-framework/helpers/plugins';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
+import {getShallowChanges} from 'coral-framework/utils';
 
-function IfSlotIsEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
-  return (
-    <Component className={className}>
-      {isSlotEmpty(slot, reduxState, rest) ? children : null}
-    </Component>
-  );
+class IfSlotIsEmpty extends React.Component {
+
+  shouldComponentUpdate(next) {
+
+    // Prevent Slot from rerendering when only reduxState has changed and
+    // it does not result in a change.
+    const changes = getShallowChanges(this.props, next);
+    if (changes.length === 1 && changes[0] === 'reduxState') {
+      return this.isSlotEmpty(this.props) !== this.isSlotEmpty(next);
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
+  isSlotEmpty(props = this.props) {
+    const {slot, className: _a, reduxState, component: _b = 'div', children: _c, ...rest} = props;
+    return isSlotEmpty(slot, reduxState, rest);
+  }
+
+  render() {
+    const {className, component: Component = 'div', children} = this.props;
+    return (
+      <Component className={className}>
+        {this.isSlotEmpty() ? children : null}
+      </Component>
+    );
+  }
 }
 
 IfSlotIsEmpty.propTypes = {
diff --git a/client/coral-framework/components/IfSlotIsNotEmpty.js b/client/coral-framework/components/IfSlotIsNotEmpty.js
index 3a41fffbd..e7a0e83ce 100644
--- a/client/coral-framework/components/IfSlotIsNotEmpty.js
+++ b/client/coral-framework/components/IfSlotIsNotEmpty.js
@@ -3,13 +3,36 @@ import {connect} from 'react-redux';
 import {isSlotEmpty} from 'coral-framework/helpers/plugins';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
+import {getShallowChanges} from 'coral-framework/utils';
 
-function IfSlotIsNotEmpty({slot, className, reduxState, component: Component = 'div', children, ...rest}) {
-  return (
-    <Component className={className}>
-      {!isSlotEmpty(slot, reduxState, rest) ? children : null}
-    </Component>
-  );
+class IfSlotIsNotEmpty extends React.Component {
+
+  shouldComponentUpdate(next) {
+
+    // Prevent Slot from rerendering when only reduxState has changed and
+    // it does not result in a change.
+    const changes = getShallowChanges(this.props, next);
+    if (changes.length === 1 && changes[0] === 'reduxState') {
+      return this.isSlotEmpty(this.props) !== this.isSlotEmpty(next);
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
+  isSlotEmpty(props = this.props) {
+    const {slot, className: _a, reduxState, component: _b = 'div', children: _c, ...rest} = props;
+    return isSlotEmpty(slot, reduxState, rest);
+  }
+
+  render() {
+    const {className, component: Component = 'div', children} = this.props;
+    return (
+      <Component className={className}>
+        {this.isSlotEmpty() ? null : children}
+      </Component>
+    );
+  }
 }
 
 IfSlotIsNotEmpty.propTypes = {
diff --git a/client/coral-framework/components/Slot.js b/client/coral-framework/components/Slot.js
index b1df6647a..c0cca143c 100644
--- a/client/coral-framework/components/Slot.js
+++ b/client/coral-framework/components/Slot.js
@@ -2,25 +2,58 @@ import React from 'react';
 import cn from 'classnames';
 import styles from './Slot.css';
 import {connect} from 'react-redux';
-import {getSlotElements} from 'coral-framework/helpers/plugins';
+import {getSlotElements, getSlotComponentProps} from 'coral-framework/helpers/plugins';
 import omit from 'lodash/omit';
+import isEqual from 'lodash/isEqual';
+import {getShallowChanges} from 'coral-framework/utils';
 
-function Slot ({fill, inline = false, className, reduxState, defaultComponent: DefaultComponent, ...rest}) {
-  let children = getSlotElements(fill, reduxState, rest);
-  const pluginConfig = reduxState.config.pluginConfig || {};
-  if (children.length === 0 && DefaultComponent) {
-    children = <DefaultComponent {...rest} />;
+const emptyConfig = {};
+
+class Slot extends React.Component {
+  shouldComponentUpdate(next) {
+
+    // Prevent Slot from rerendering when only reduxState has changed and
+    // it does not result in a change of slot children.
+    const changes = getShallowChanges(this.props, next);
+    if (changes.length === 1 && changes[0] === 'reduxState') {
+      const prevChildrenUuid = this.getChildren(this.props).map((child) => child.type.talkUuid);
+      const nextChildrenUuid = this.getChildren(next).map((child) => child.type.talkUuid);
+      return !isEqual(prevChildrenUuid, nextChildrenUuid);
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
   }
 
-  return (
-    <div className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className)}>
-      {children}
-    </div>
-  );
+  getSlotProps({fill: _a, inline: _b, className: _c, reduxState: _d, defaultComponent_: _e, queryData: _f, ...rest} = this.props) {
+    return rest;
+  }
+
+  getChildren(props = this.props) {
+    return getSlotElements(props.fill, props.reduxState, this.getSlotProps(props), props.queryData);
+  }
+
+  render() {
+    const {inline = false, className, reduxState, defaultComponent: DefaultComponent, queryData} = this.props;
+    let children = this.getChildren();
+    const pluginConfig = reduxState.config.pluginConfig || emptyConfig;
+    if (children.length === 0 && DefaultComponent) {
+      children = <DefaultComponent {...getSlotComponentProps(DefaultComponent, reduxState, this.getSlotProps(this.props), queryData)} />;
+    }
+
+    return (
+      <div className={cn({[styles.inline]: inline, [styles.debug]: pluginConfig.debug}, className)}>
+        {children}
+      </div>
+    );
+  }
 }
 
 Slot.propTypes = {
-  fill: React.PropTypes.string
+  fill: React.PropTypes.string.isRequired,
+
+  // props coming from graphql must be passed through this property.
+  queryData: React.PropTypes.object,
 };
 
 const mapStateToProps = (state) => ({
diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js
index b2ca78142..3173115c2 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -5,13 +5,19 @@ import merge from 'lodash/merge';
 import flattenDeep from 'lodash/flattenDeep';
 import isEmpty from 'lodash/isEmpty';
 import flatten from 'lodash/flatten';
+import mapValues from 'lodash/mapValues';
 import {loadTranslations} from 'coral-framework/services/i18n';
 import {injectReducers} from 'coral-framework/services/store';
+import {getDisplayName} from 'coral-framework/helpers/hoc';
 import camelize from './camelize';
 import plugins from 'pluginsConfig';
+import uuid from 'uuid/v4';
 
-export function getSlotComponents(slot, reduxState, props = {}) {
-  const pluginConfig = reduxState.config.plugin_config || {};
+// This is returned for pluginConfig when it is empty.
+const emptyConfig = {};
+
+export function getSlotComponents(slot, reduxState, props = {}, queryData = {}) {
+  const pluginConfig = reduxState.config.plugin_config || emptyConfig;
   return flatten(plugins
 
       // Filter out components that have slots and have been disabled in `plugin_config`
@@ -24,7 +30,7 @@ export function getSlotComponents(slot, reduxState, props = {}) {
       if(!component.isExcluded) {
         return true;
       }
-      let resolvedProps = {...props, config: pluginConfig};
+      let resolvedProps = getSlotComponentProps(component, reduxState, props, queryData);
       if (component.mapStateToProps) {
         resolvedProps = {...resolvedProps, ...component.mapStateToProps(reduxState)};
       }
@@ -32,17 +38,70 @@ export function getSlotComponents(slot, reduxState, props = {}) {
     });
 }
 
-export function isSlotEmpty(slot, reduxState, props) {
-  return getSlotComponents(slot, reduxState, props).length === 0;
+export function isSlotEmpty(slot, reduxState, props = {}, queryData = {}) {
+  return getSlotComponents(slot, reduxState, props, queryData).length === 0;
+}
+
+// Memoize the warnings so we only show them once.
+const memoizedWarnings = [];
+
+// withWarnings decorates the props of queryData with a proxy that
+// prints a warning when accessing deeper props.
+function withWarnings(component, queryData) {
+  if (process.env.NODE_ENV !== 'production' && window.Proxy) {
+
+    // Show warnings when accessing queryData only when not in production.
+    return mapValues(queryData, (value, key) => {
+
+      // Keep null values..
+      if (!queryData[key]) {
+        return queryData[key];
+      }
+      return new Proxy(queryData[key], {
+        get(target, name) {
+
+          // Only care about the components defined in the plugins.
+          if (component.talkPluginName) {
+            const warning = `'${getDisplayName(component)}' of '${component.talkPluginName}' accessed '${key}.${name}' but did not define fragments using the withFragment HOC`;
+            if (memoizedWarnings.indexOf(warning) === -1) {
+              console.warn(warning);
+              memoizedWarnings.push(warning);
+            }
+          }
+          return queryData[key][name];
+        }
+      });
+    });
+  }
+
+  return queryData;
+}
+
+/**
+ * getSlotComponentProps calculate the props we would pass to the slot component.
+ * query datas are only passed to the component if it is defined in `component.fragments`.
+ */
+export function getSlotComponentProps(component, reduxState, props, queryData) {
+  const pluginConfig = reduxState.config.plugin_config || emptyConfig;
+  return {
+    ...props,
+    config: pluginConfig,
+    ...(
+      component.fragments
+      ? pick(queryData, Object.keys(component.fragments))
+      : withWarnings(component, queryData)
+    )
+  };
 }
 
 /**
  * Returns React Elements for given slot.
  */
-export function getSlotElements(slot, reduxState, props = {}) {
-  const pluginConfig = reduxState.config.plugin_config || {};
-  return getSlotComponents(slot, reduxState, props)
-    .map((component, i) => React.createElement(component, {key: i, ...props, config: pluginConfig}));
+export function getSlotElements(slot, reduxState, props = {}, queryData = {}) {
+  return getSlotComponents(slot, reduxState, props, queryData)
+    .map((component, i) => {
+      return React.createElement(component, {key: i, ...getSlotComponentProps(component, reduxState, props, queryData)});
+    });
 }
 
 export function getSlotFragments(slot, part) {
@@ -100,7 +159,12 @@ function addMetaDataToSlotComponents() {
     const slots = plugin.module.slots;
     slots && Object.keys(slots).forEach((slot) => {
       slots[slot].forEach((component) => {
+
+        // Attach plugin name to the component
         component.talkPluginName = plugin.name;
+
+        // Attach uuid to the component
+        component.talkUuid = uuid();
       });
     });
   });
diff --git a/client/coral-framework/hocs/withCopyToClipboard.js b/client/coral-framework/hocs/withCopyToClipboard.js
index 9e8046802..4de606c40 100644
--- a/client/coral-framework/hocs/withCopyToClipboard.js
+++ b/client/coral-framework/hocs/withCopyToClipboard.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Clipboard from 'clipboard';
+import hoistStatics from 'recompose/hoistStatics';
 
-export default (WrappedComponent) => {
+export default hoistStatics((WrappedComponent) => {
   class WithCopyToClipboard extends React.Component {
     componentDidMount() {
       const clipboard = new Clipboard(ReactDOM.findDOMNode(this));
@@ -26,4 +27,4 @@ export default (WrappedComponent) => {
   }
 
   return WithCopyToClipboard;
-};
+});
diff --git a/client/coral-framework/hocs/withEmit.js b/client/coral-framework/hocs/withEmit.js
index 3a3216c8a..22d98bb27 100644
--- a/client/coral-framework/hocs/withEmit.js
+++ b/client/coral-framework/hocs/withEmit.js
@@ -1,11 +1,12 @@
 import React from 'react';
-const PropTypes = require('prop-types');
+import hoistStatics from 'recompose/hoistStatics';
+import PropTypes from 'prop-types';
 
 /**
  * WithEmit provides a property `emit: (eventName, value)`
  * to the wrapped component.
  */
-export default (WrappedComponent) => {
+export default hoistStatics((WrappedComponent) => {
   class WithEmit extends React.Component {
     static contextTypes = {
       eventEmitter: PropTypes.object,
@@ -24,4 +25,4 @@ export default (WrappedComponent) => {
   }
 
   return WithEmit;
-};
+});
diff --git a/client/coral-framework/hocs/withFragments.js b/client/coral-framework/hocs/withFragments.js
index 62e96444c..9bc06290e 100644
--- a/client/coral-framework/hocs/withFragments.js
+++ b/client/coral-framework/hocs/withFragments.js
@@ -1,5 +1,109 @@
-// TODO: revisit `filtering` after https://github.com/apollographql/graphql-anywhere/issues/38.
-export default (fragments) => (BaseComponent) => {
-  BaseComponent.fragments = fragments;
-  return BaseComponent;
-};
+import React from 'react';
+import graphql from 'graphql-anywhere';
+import {resolveFragments} from 'coral-framework/services/graphqlRegistry';
+import mapValues from 'lodash/mapValues';
+import hoistStatics from 'recompose/hoistStatics';
+import {getShallowChanges} from 'coral-framework/utils';
+import union from 'lodash/union';
+
+// TODO: Should not depend on `props.data`
+// Currently necessary because of this https://github.com/apollographql/graphql-anywhere/issues/38
+function filter(doc, data, variables) {
+  const resolver = (
+    fieldName,
+    root,
+    args,
+    context,
+    info,
+  ) => {
+    return root[info.resultKey];
+  };
+
+  return graphql(resolver, doc, data, null, variables);
+}
+
+// filterProps returns only the property as defined in the fragments.
+// TODO: Should not depend on `props.data`
+function filterProps(props, fragments) {
+  const filtered = {};
+  Object.keys(fragments).forEach((key) => {
+    if (!(key in props)) {
+      return;
+    }
+    filtered[key] = props.data
+      ? filter(fragments[key], props[key], props.data.variables)
+      : props[key];
+  });
+  return filtered;
+}
+
+// hasEqualLeaves compares two different apollo query result for equality.
+function hasEqualLeaves(a, b, path = '') {
+  for (const key of union(Object.keys(a), Object.keys(b))) {
+    if (!(key in a) || !(key in b)) {
+      return false;
+    }
+    if (typeof a[key] === 'object' && a[key] && b[key]) {
+      if (Array.isArray(a[key])) {
+        if (a[key].length !== b[key].length) {
+          return false;
+        }
+      }
+      if (!hasEqualLeaves(a[key], b[key], `${path}.${key}`)) {
+        return false;
+      }
+      continue;
+    }
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export default (fragments) => hoistStatics((BaseComponent) => {
+  class WithFragments extends React.Component {
+    fragments = mapValues(fragments, (val) => resolveFragments(val));
+    fragmentKeys = Object.keys(fragments).sort();
+
+    // Cache variables between lifecycles to speed up render.
+    filteredProps = filterProps(this.props, this.fragments)
+    queryDataHasChanged = false;
+    shallowChanges = null;
+
+    componentWillReceiveProps(next) {
+      this.shallowChanges = getShallowChanges(this.props, next);
+
+      if (this.fragmentKeys.some((key) => this.shallowChanges.indexOf(key) >= 0)) {
+        const nextFilteredProps = filterProps(next, this.fragments);
+        this.queryDataHasChanged = !hasEqualLeaves(this.filteredProps, nextFilteredProps);
+        if (this.queryDataHasChanged) {
+
+          // Only changed props when query data has changed.
+          this.filteredProps = filterProps(next, this.fragments);
+        }
+      }
+    }
+
+    shouldComponentUpdate(next) {
+      const onlyQueryDataChanges = this.shallowChanges.every((key) => this.fragmentKeys.indexOf(key) >= 0);
+
+      if (onlyQueryDataChanges) {
+        return this.queryDataHasChanged;
+      }
+
+      return this.shallowChanges.length !== 0;
+    }
+
+    render() {
+      const queryProps = this.filteredProps;
+      return <BaseComponent
+        {...this.props}
+        {...queryProps}
+      />;
+    }
+  }
+
+  WithFragments.fragments = fragments;
+  return WithFragments;
+});
diff --git a/client/coral-framework/hocs/withMutation.js b/client/coral-framework/hocs/withMutation.js
index 7e2c3d09d..7c3dcfa1a 100644
--- a/client/coral-framework/hocs/withMutation.js
+++ b/client/coral-framework/hocs/withMutation.js
@@ -8,6 +8,8 @@ import {getMutationOptions, resolveFragments} from 'coral-framework/services/gra
 import {getDefinitionName, getResponseErrors} from '../utils';
 import PropTypes from 'prop-types';
 import t from 'coral-framework/services/i18n';
+import hoistStatics from 'recompose/hoistStatics';
+import union from 'lodash/union';
 
 class ResponseErrors extends Error {
   constructor(errors) {
@@ -30,7 +32,7 @@ class ResponseError {
  * Exports a HOC with the same signature as `graphql`, that will
  * apply mutation options registered in the graphRegistry.
  */
-export default (document, config = {}) => (WrappedComponent) => {
+export default (document, config = {}) => hoistStatics((WrappedComponent) => {
   config = {
     ...config,
     options: config.options || {},
@@ -46,7 +48,13 @@ export default (document, config = {}) => (WrappedComponent) => {
     // Lazily resolve fragments from graphRegistry to support circular dependencies.
     memoized = null;
 
-    wrappedProps = (data) => {
+    // Props as we would pass to the BaseComponent without optimizations.
+    dynamicProps = {};
+
+    // Props that are optimized by keeping the identity of function callbacks.
+    staticProps = {};
+
+    propsWrapper = (data) => {
       const name = getDefinitionName(document);
       const callbacks = getMutationOptions(name);
       const mutate = (base) => {
@@ -132,12 +140,34 @@ export default (document, config = {}) => (WrappedComponent) => {
             throw error;
           });
       };
-      return config.props({...data, mutate});
+
+      // Save current props to `dynamicProps`
+      this.dynamicProps = config.props({...data, mutate});
+
+      // Sync props to `staticProps`.
+      // `staticProps` ultimately contains the same props as `dynamicProps` but all callbacks
+      // keep their identity.
+      union(Object.keys(this.dynamicProps), Object.keys(this.staticProps)).forEach((key) => {
+        if (!(key in this.dynamicProps)) {
+          delete this.staticProps[key];
+          return;
+        }
+        if (typeof this.dynamicProps[key] !== 'function') {
+          this.staticProps[key] = this.dynamicProps[key];
+          return;
+        }
+
+        if (!(key in this.staticProps)) {
+          this.staticProps[key] = (...args) => this.dynamicProps[key](...args);
+          return;
+        }
+      });
+      return this.staticProps;
     };
 
     getWrapped = () => {
       if (!this.memoized) {
-        this.memoized = graphql(resolveFragments(document), {...config, props: this.wrappedProps})(WrappedComponent);
+        this.memoized = graphql(resolveFragments(document), {...config, props: this.propsWrapper})(WrappedComponent);
       }
       return this.memoized;
     };
@@ -147,4 +177,4 @@ export default (document, config = {}) => (WrappedComponent) => {
       return <Wrapped {...this.props} />;
     }
   };
-};
+});
diff --git a/client/coral-framework/hocs/withQuery.js b/client/coral-framework/hocs/withQuery.js
index 82c9c29d4..f19c3209e 100644
--- a/client/coral-framework/hocs/withQuery.js
+++ b/client/coral-framework/hocs/withQuery.js
@@ -3,6 +3,7 @@ import {graphql} from 'react-apollo';
 import {getQueryOptions, resolveFragments} from 'coral-framework/services/graphqlRegistry';
 import {getDefinitionName, separateDataAndRoot, getResponseErrors} from '../utils';
 import PropTypes from 'prop-types';
+import hoistStatics from 'recompose/hoistStatics';
 
 const withSkipOnErrors = (reducer) => (prev, action, ...rest) => {
   if (action.type === 'APOLLO_MUTATION_RESULT' && getResponseErrors(action.result)) {
@@ -35,7 +36,7 @@ function networkStatusToString(networkStatus) {
  * Exports a HOC with the same signature as `graphql`, that will
  * apply query options registered in the graphRegistry.
  */
-export default (document, config = {}) => (WrappedComponent) => {
+export default (document, config = {}) => hoistStatics((WrappedComponent) => {
   const name = getDefinitionName(document);
 
   return class WithQuery extends React.Component {
@@ -46,6 +47,7 @@ export default (document, config = {}) => (WrappedComponent) => {
     // Lazily resolve fragments from graphRegistry to support circular dependencies.
     memoized = null;
     lastNetworkStatus = null;
+    data = null;
 
     emitWhenNeeded(data) {
       const {variables, networkStatus} = data;
@@ -60,59 +62,93 @@ export default (document, config = {}) => (WrappedComponent) => {
       this.context.eventEmitter.emit(`query.${name}.${status}`, {variables, data: root});
     }
 
+    nextData(data) {
+      this.emitWhenNeeded(data);
+
+      // If data was previously set, we update it in a immutable way.
+      if (this.data) {
+        if (this.data.networkStatus !== data.networkStatus ||
+            this.data.loading !== data.loading ||
+            this.data.error !== data.error ||
+            this.data.variables !== data.variables) {
+          this.data = {
+            ...this.data,
+            error: data.error,
+            networkStatus: data.networkStatus,
+            loading: data.loading,
+            variables: data.variables,
+          };
+        }
+      }
+      else {
+
+        // Set data for the first time.
+        this.data = {
+          error: data.error,
+          variables: data.variables,
+          networkStatus: data.networkStatus,
+          loading: data.loading,
+          startPolling: data.startPolling,
+          stopPolling: data.stopPolling,
+          refetch: data.refetch,
+          updateQuery: data.updateQuery,
+          subscribeToMore: (stmArgs) => {
+
+            // Resolve document fragments before passing it to `apollo-client`.
+            return data.subscribeToMore({
+              ...stmArgs,
+              document: resolveFragments(stmArgs.document),
+              onError: (err) => {
+                if (stmArgs.onErr) {
+                  return stmArgs.onErr(err);
+                }
+                throw err;
+              },
+            });
+          },
+          fetchMore: (lmArgs) => {
+            const fetchName = getDefinitionName(lmArgs.query);
+            this.context.eventEmitter.emit(
+              `query.${name}.fetchMore.${fetchName}.begin`,
+              {variables: lmArgs.variables});
+
+            // Resolve document fragments before passing it to `apollo-client`.
+            return data.fetchMore({
+              ...lmArgs,
+              query: resolveFragments(lmArgs.query),
+            })
+            .then((res) => {
+              this.context.eventEmitter.emit(
+                `query.${name}.fetchMore.${fetchName}.success`,
+                {variables: lmArgs.variables, data: res.data});
+              return Promise.resolve(res);
+            })
+            .catch((err) => {
+              this.context.eventEmitter.emit(
+                `query.${name}.fetchMore.${fetchName}.error`,
+                {variables: lmArgs.variables, error: err});
+              throw err;
+            });
+          },
+        };
+      }
+      return this.data;
+    }
+
     wrappedConfig = {
       ...config,
       options: config.options || {},
       props: (args) => {
-        this.emitWhenNeeded(args.data);
+        const nextData = this.nextData(args.data);
+        const {root} = separateDataAndRoot(args.data);
+        if (config.props) {
 
-        const wrappedArgs = {
-          ...args,
-          data: {
-            ...args.data,
-            subscribeToMore: (stmArgs) => {
+          // Custom props, in this case we just pass the wrapped args to it.
+          return config.props({...args, data: {...args.data, ...nextData}});
+        }
 
-              // Resolve document fragments before passing it to `apollo-client`.
-              return args.data.subscribeToMore({
-                ...stmArgs,
-                document: resolveFragments(stmArgs.document),
-                onError: (err) => {
-                  if (stmArgs.onErr) {
-                    return stmArgs.onErr(err);
-                  }
-                  throw err;
-                },
-              });
-            },
-            fetchMore: (lmArgs) => {
-              const fetchName = getDefinitionName(lmArgs.query);
-              this.context.eventEmitter.emit(
-                `query.${name}.fetchMore.${fetchName}.begin`,
-                {variables: lmArgs.variables});
-
-              // Resolve document fragments before passing it to `apollo-client`.
-              return args.data.fetchMore({
-                ...lmArgs,
-                query: resolveFragments(lmArgs.query),
-              })
-              .then((res) => {
-                this.context.eventEmitter.emit(
-                  `query.${name}.fetchMore.${fetchName}.success`,
-                  {variables: lmArgs.variables, data: res.data});
-                return Promise.resolve(res);
-              })
-              .catch((err) => {
-                this.context.eventEmitter.emit(
-                  `query.${name}.fetchMore.${fetchName}.error`,
-                  {variables: lmArgs.variables, error: err});
-                throw err;
-              });
-            },
-          },
-        };
-        return config.props
-          ? config.props(wrappedArgs)
-          : separateDataAndRoot(wrappedArgs.data);
+        // Return our wrapped data with a separated root.
+        return {...args, data: nextData, root};
       },
     };
 
@@ -155,4 +191,4 @@ export default (document, config = {}) => (WrappedComponent) => {
       return <Wrapped {...this.props} />;
     }
   };
-};
+});
diff --git a/client/coral-framework/utils/index.js b/client/coral-framework/utils/index.js
index 84249667d..634b6661f 100644
--- a/client/coral-framework/utils/index.js
+++ b/client/coral-framework/utils/index.js
@@ -1,5 +1,6 @@
 import {gql} from 'react-apollo';
 import t from 'coral-framework/services/i18n';
+import union from 'lodash/union';
 import {capitalize} from 'coral-framework/helpers/strings';
 
 export const getTotalActionCount = (type, comment) => {
@@ -184,3 +185,8 @@ export function getSlotFragmentSpreads(slots, resource) {
 export function isCommentActive(commentStatus) {
   return ['NONE', 'ACCEPTED'].indexOf(commentStatus) >= 0;
 }
+
+export function getShallowChanges(a, b) {
+  return union(Object.keys(a), Object.keys(b))
+    .filter((key) => a[key] !== b[key]);
+}
diff --git a/client/coral-framework/utils/user.js b/client/coral-framework/utils/user.js
new file mode 100644
index 000000000..044583026
--- /dev/null
+++ b/client/coral-framework/utils/user.js
@@ -0,0 +1,14 @@
+ /**
+ * getReliability
+ * retrieves reliability value as string
+ */
+  
+export const getReliability = (reliabilityValue) => {
+  if (reliabilityValue === null) {
+    return 'neutral';
+  } else if (reliabilityValue) {
+    return 'reliable';
+  } else {
+    return 'unreliable';
+  }
+};
diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js
index 920f50e73..87277eeff 100644
--- a/client/coral-settings/containers/ProfileContainer.js
+++ b/client/coral-settings/containers/ProfileContainer.js
@@ -14,6 +14,7 @@ import CommentHistory from 'talk-plugin-history/CommentHistory';
 import {showSignInDialog, checkLogin} from 'coral-framework/actions/auth';
 import {insertCommentsSorted} from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
 
 import t from 'coral-framework/services/i18n';
 
@@ -51,9 +52,9 @@ class ProfileContainer extends Component {
   };
 
   render() {
-    const {auth, auth: {user}, asset, showSignInDialog, stopIgnoringUser} = this.props;
+    const {auth, auth: {user}, showSignInDialog, stopIgnoringUser, root, data} = this.props;
     const {me} = this.props.root;
-    const loading = [1, 2, 4].indexOf(this.props.data.networkStatus) >= 0;
+    const loading = this.props.data.loading;
 
     if (!auth.loggedIn) {
       return <NotLoggedIn showSignInDialog={showSignInDialog} />;
@@ -87,13 +88,18 @@ class ProfileContainer extends Component {
 
         <h3>{t('framework.my_comments')}</h3>
         {me.comments.nodes.length
-          ? <CommentHistory comments={me.comments} asset={asset} link={link} loadMore={this.loadMore}/>
+          ? <CommentHistory data={data} root={root} comments={me.comments} link={link} loadMore={this.loadMore}/>
           : <p>{t('user_no_comment')}</p>}
       </div>
     );
   }
 }
 
+// TODO: This Slot should be included in `talk-plugin-history` instead.
+const slots = [
+  'commentContent',
+];
+
 const CommentFragment = gql`
   fragment TalkSettings_CommentConnectionFragment on CommentConnection {
     nodes {
@@ -103,8 +109,10 @@ const CommentFragment = gql`
         id
         title
         url
+        ${getSlotFragmentSpreads(slots, 'asset')}
       }
       created_at
+      ${getSlotFragmentSpreads(slots, 'comment')}
     }
     endCursor
     hasNextPage
@@ -133,12 +141,12 @@ const withProfileQuery = withQuery(
         ...TalkSettings_CommentConnectionFragment
       }
     }
+    ${getSlotFragmentSpreads(slots, 'root')}
   }
   ${CommentFragment}
 `);
 
 const mapStateToProps = (state) => ({
-  asset: state.asset,
   auth: state.auth
 });
 
diff --git a/client/coral-ui/components/Icon.css b/client/coral-ui/components/Icon.css
index 16fe6d235..1a118257a 100644
--- a/client/coral-ui/components/Icon.css
+++ b/client/coral-ui/components/Icon.css
@@ -1,3 +1,5 @@
 
 .root {
+  vertical-align: middle;
+  font-size: inherit;
 }
diff --git a/client/talk-plugin-flags/components/FlagButton.js b/client/talk-plugin-flags/components/FlagButton.js
index 85ceed0ea..1d8438ba0 100644
--- a/client/talk-plugin-flags/components/FlagButton.js
+++ b/client/talk-plugin-flags/components/FlagButton.js
@@ -133,7 +133,9 @@ export default class FlagButton extends Component {
   }
 
   handleClickOutside = () => {
-    this.closeMenu();
+    if (this.state.showMenu) {
+      this.closeMenu();
+    }
   }
 
   render () {
diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index f90362e2d..4cf9d875c 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -7,54 +7,55 @@ import CommentContent from '../coral-embed-stream/src/components/CommentContent'
 
 import t from 'coral-framework/services/i18n';
 
-const Comment = (props) => {
-  return (
-    <div className={styles.myComment}>
-      <div>
-        <Slot
-          fill="commentContent"
-          defaultComponent={CommentContent}
-          className={`${styles.commentBody} myCommentBody`}
-          comment={props.comment}
-        />
-        <p className="myCommentAsset">
-          <a
-            className={`${styles.assetURL} myCommentAnchor`}
-            href="#"
-            onClick={props.link(`${props.asset.url}`)}>
-            Story: {props.asset.title ? props.asset.title : props.asset.url}
-          </a>
-        </p>
-      </div>
-      <div className={styles.sidebar}>
-        <ul>
-          <li>
-            <a onClick={props.link(`${props.asset.url}?commentId=${props.comment.id}`)}>
-              <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
+class Comment extends React.Component {
+
+  render() {
+    const {comment, link, data, root} = this.props;
+    return (
+      <div className={styles.myComment}>
+        <div>
+          <Slot
+            fill="commentContent"
+            defaultComponent={CommentContent}
+            className={`${styles.commentBody} myCommentBody`}
+            data={data}
+            queryData={{root, comment, asset: comment.asset}}
+          />
+          <p className="myCommentAsset">
+            <a
+              className={`${styles.assetURL} myCommentAnchor`}
+              href="#"
+              onClick={link(`${comment.asset.url}`)}>
+              Story: {comment.asset.title ? comment.asset.title : comment.asset.url}
             </a>
-          </li>
-          <li>
-            <Icon name="schedule" className={styles.iconDate}/>
-            <PubDate
-              className={styles.pubdate}
-              created_at={props.comment.created_at}
-            />
-          </li>
-        </ul>
+          </p>
+        </div>
+        <div className={styles.sidebar}>
+          <ul>
+            <li>
+              <a onClick={link(`${comment.asset.url}?commentId=${comment.id}`)}>
+                <Icon name="open_in_new" className={styles.iconView}/>{t('view_conversation')}
+              </a>
+            </li>
+            <li>
+              <Icon name="schedule" className={styles.iconDate}/>
+              <PubDate
+                className={styles.pubdate}
+                created_at={comment.created_at}
+              />
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 Comment.propTypes = {
   comment: PropTypes.shape({
     id: PropTypes.string,
     body: PropTypes.string
   }).isRequired,
-  asset: PropTypes.shape({
-    url: PropTypes.string,
-    title: PropTypes.string
-  }).isRequired
 };
 
 export default Comment;
diff --git a/client/talk-plugin-history/CommentHistory.js b/client/talk-plugin-history/CommentHistory.js
index d584d6a0a..43ae93f1d 100644
--- a/client/talk-plugin-history/CommentHistory.js
+++ b/client/talk-plugin-history/CommentHistory.js
@@ -22,16 +22,18 @@ class CommentHistory extends React.Component {
   }
 
   render() {
-    const {link, comments} = this.props;
+    const {link, comments, data, root} = this.props;
     return (
       <div className={`${styles.header} commentHistory`}>
         <div className="commentHistory__list">
           {comments.nodes.map((comment, i) => {
             return <Comment
               key={i}
+              data={data}
+              root={root}
               comment={comment}
               link={link}
-              asset={comment.asset} />;
+            />;
           })}
         </div>
         {comments.hasNextPage &&
diff --git a/config.js b/config.js
index a92802ee7..11c8b5077 100644
--- a/config.js
+++ b/config.js
@@ -8,6 +8,7 @@
 require('env-rewrite').rewrite();
 
 const uniq = require('lodash/uniq');
+const ms = require('ms');
 
 //==============================================================================
 // CONFIG INITIALIZATION
@@ -84,6 +85,23 @@ const CONFIG = {
   MONGO_URL: process.env.TALK_MONGO_URL,
   REDIS_URL: process.env.TALK_REDIS_URL,
 
+  // REDIS_RECONNECTION_MAX_ATTEMPTS is the amount of attempts that a redis
+  // connection will attempt to reconnect before aborting with an error.
+  REDIS_RECONNECTION_MAX_ATTEMPTS: parseInt(process.env.TALK_REDIS_RECONNECTION_MAX_ATTEMPTS || '100'),
+
+  // REDIS_RECONNECTION_MAX_RETRY_TIME is the time in string format for the
+  // maximum amount of time that a client can be considered "connecting" before
+  // attempts at reconnection are aborted with an error.
+  REDIS_RECONNECTION_MAX_RETRY_TIME: ms(process.env.TALK_REDIS_RECONNECTION_MAX_RETRY_TIME || '1 min'),
+
+  // REDIS_RECONNECTION_BACKOFF_FACTOR is the factor that will be multiplied
+  // against the current attempt count inbetween attempts to connect to redis.
+  REDIS_RECONNECTION_BACKOFF_FACTOR: ms(process.env.TALK_REDIS_RECONNECTION_BACKOFF_FACTOR || '500 ms'),
+
+  // REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME is the minimum time used to delay
+  // before attempting to reconnect to redis.
+  REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME: ms(process.env.TALK_REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME || '1 sec'),
+
   //------------------------------------------------------------------------------
   // Server Config
   //------------------------------------------------------------------------------
@@ -135,7 +153,7 @@ const CONFIG = {
   DISABLE_AUTOFLAG_SUSPECT_WORDS: process.env.TALK_DISABLE_AUTOFLAG_SUSPECT_WORDS === 'TRUE',
 
   // TRUST_THRESHOLDS defines the thresholds used for automoderation.
-  TRUST_THRESHOLDS: process.env.TRUST_THRESHOLDS || 'comment:-1,-1;flag:-1,-1'
+  TRUST_THRESHOLDS: process.env.TRUST_THRESHOLDS || 'comment:2,-1;flag:2,-1'
 };
 
 //==============================================================================
diff --git a/docs/_docs/02-01-configuration.md b/docs/_docs/02-01-configuration.md
index 8f76ad999..df790b24b 100644
--- a/docs/_docs/02-01-configuration.md
+++ b/docs/_docs/02-01-configuration.md
@@ -52,6 +52,21 @@ These are only used during the webpack build.
 - `TALK_MONGO_URL` (*required*) - the database connection string for the MongoDB database.
 - `TALK_REDIS_URL` (*required*) - the database connection string for the Redis database.
 
+#### Advanced
+
+- `TALK_REDIS_RECONNECTION_MAX_ATTEMPTS` (_optional_) - the amount of attempts
+  that a redis connection will attempt to reconnect before aborting with an
+  error. (Default `100`)
+- `TALK_REDIS_RECONNECTION_MAX_RETRY_TIME` (_optional_) - the time in string
+  format for the maximum amount of time that a client can be considered
+  "connecting" before attempts at reconnection are aborted with an error.
+  (Default `1 min`)
+- `TALK_REDIS_RECONNECTION_BACKOFF_FACTOR` (_optional_) - the time factor that
+  will be multiplied against the current attempt count inbetween attempts to
+  connect to redis. (Default `500 ms`)
+- `TALK_REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME` (_optional_) - the minimum time
+  used to delay before attempting to reconnect to redis. (Default `1 sec`)
+
 ### Server
 
 - `TALK_ROOT_URL` (*required*) - root url of the installed application externally
@@ -162,7 +177,7 @@ Trust can auto-moderate comments based on user history. By specifying this
 option, the behavior can be changed to offer different results.
 
 - `TRUST_THRESHOLDS` (_optional_) - configure the reliability thresholds for
-  flagging and commenting. (Default `comment:-1,-1;flag:-1,-1`)
+  flagging and commenting. (Default `comment:2,-1;flag:2,-1`)
 
 The form of the environment variable:
 
diff --git a/graph/context.js b/graph/context.js
index cffec0896..8d7c740b6 100644
--- a/graph/context.js
+++ b/graph/context.js
@@ -53,7 +53,7 @@ class Context {
     this.plugins = decorateContextPlugins(this, contextPlugins);
 
     // Bind the publish/subscribe to the context.
-    this.pubsub = pubsub.createClient();
+    this.pubsub = pubsub.getClient();
   }
 }
 
diff --git a/graph/subscriptions.js b/graph/subscriptions.js
index adac849e0..f89b41d3a 100644
--- a/graph/subscriptions.js
+++ b/graph/subscriptions.js
@@ -127,15 +127,13 @@ const setupFunctions = plugins.get('server', 'setupFunctions').reduce((acc, {plu
   }),
 });
 
-const pubsubClient = pubsub.createClientFactory();
-
 /**
  * This creates a new subscription manager.
  */
 const createSubscriptionManager = (server) => new SubscriptionServer({
   subscriptionManager: new SubscriptionManager({
     schema,
-    pubsub: pubsubClient(),
+    pubsub: pubsub.getClient(),
     setupFunctions,
   }),
   onConnect: ({token}, connection) => {
diff --git a/middleware/pubsub.js b/middleware/pubsub.js
index 15f7c51a2..957a523a7 100644
--- a/middleware/pubsub.js
+++ b/middleware/pubsub.js
@@ -1,12 +1,11 @@
 const pubsub = require('../services/pubsub');
-const pubsubClient = pubsub.createClientFactory();
 
 // To handle dependancy injection safer, we inject the pubsub handle onto the
 // request object.
 module.exports = (req, res, next) => {
 
   // Attach the pubsub handle to the requests.
-  req.pubsub = pubsubClient();
+  req.pubsub = pubsub.getClient();
 
   // Forward on the request.
   next();
diff --git a/plugin-api/beta/client/hocs/withReaction.js b/plugin-api/beta/client/hocs/withReaction.js
index 22c30d639..3300ac2d3 100644
--- a/plugin-api/beta/client/hocs/withReaction.js
+++ b/plugin-api/beta/client/hocs/withReaction.js
@@ -11,14 +11,29 @@ import {showSignInDialog} from 'coral-framework/actions/auth';
 import {addNotification} from 'coral-framework/actions/notification';
 import {capitalize} from 'coral-framework/helpers/strings';
 import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
+import hoistStatics from 'recompose/hoistStatics';
 import * as PropTypes from 'prop-types';
+import {getDefinitionName} from '../utils';
 
-export default (reaction) => (WrappedComponent) => {
+/*
+ * Disable false-positive warning below, as it doesn't work well with how we currently
+ * assemble the queries.
+ *
+ * Warning: fragment with name {fragment name} already exists.
+ * graphql-tag enforces all fragment names across your application to be unique; read more about
+ * this in the docs: http://dev.apollodata.com/core/fragments.html#unique-names
+ */
+gql.disableFragmentWarnings();
+
+export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
   if (typeof reaction !== 'string') {
     console.error('Reaction must be a valid string');
     return null;
   }
 
+  // fragments allow the extension of the fragments defined in this HOC.
+  const {fragments = {}} = options;
+
   // Global instance counter for each `reaction` type.
   let instances = 0;
 
@@ -175,7 +190,7 @@ export default (reaction) => (WrappedComponent) => {
         createdSubscription = context.client.subscribe({
           query: REACTION_CREATED_SUBSCRIPTION,
           variables: {
-            assetId: this.props.root.asset.id,
+            assetId: this.props.asset.id,
           },
         }).subscribe({
           next: this.onReactionCreated,
@@ -185,7 +200,7 @@ export default (reaction) => (WrappedComponent) => {
         deletedSubscription = context.client.subscribe({
           query: REACTION_DELETED_SUBSCRIPTION,
           variables: {
-            assetId: this.props.root.asset.id,
+            assetId: this.props.asset.id,
           },
         }).subscribe({
           next: this.onReactionDeleted,
@@ -247,7 +262,7 @@ export default (reaction) => (WrappedComponent) => {
     }
 
     render() {
-      const {comment} = this.props;
+      const {root, asset, comment} = this.props;
 
       const reactionSummary = getMyActionSummary(
         `${Reaction}ActionSummary`,
@@ -262,10 +277,12 @@ export default (reaction) => (WrappedComponent) => {
       const alreadyReacted = !!reactionSummary;
 
       return <WrappedComponent
+        root={root}
+        asset={asset}
+        comment={comment}
         showSignInDialog={this.props.showSignInDialog}
         addNotification={this.props.addNotification}
         user={this.props.user}
-        comment={comment}
         reactionSummary={reactionSummary}
         count={count}
         alreadyReacted={alreadyReacted}
@@ -371,9 +388,19 @@ export default (reaction) => (WrappedComponent) => {
 
   const enhance = compose(
     withFragments({
+      ...fragments,
+      asset: gql`
+        fragment ${Reaction}Button_asset on Asset {
+          id
+          ${fragments.asset ? `...${getDefinitionName(fragments.asset)}` : ''}
+        }
+        ${fragments.asset ? fragments.asset : ''}
+      `,
       comment: gql`
         fragment ${Reaction}Button_comment on Comment {
+          id
           action_summaries {
+            __typename
             ... on ${Reaction}ActionSummary {
               count
               current_user {
@@ -381,7 +408,10 @@ export default (reaction) => (WrappedComponent) => {
               }
             }
           }
-        }`
+          ${fragments.comment ? `...${getDefinitionName(fragments.comment)}` : ''}
+        }
+        ${fragments.comment ? fragments.comment : ''}
+      `
     }),
     connect(mapStateToProps, mapDispatchToProps),
     withDeleteReaction,
@@ -391,4 +421,4 @@ export default (reaction) => (WrappedComponent) => {
   WithReactions.displayName = `WithReactions(${getDisplayName(WrappedComponent)})`;
 
   return enhance(WithReactions);
-};
+});
diff --git a/plugin-api/beta/client/hocs/withTags.js b/plugin-api/beta/client/hocs/withTags.js
index b0a74f4d7..491c35038 100644
--- a/plugin-api/beta/client/hocs/withTags.js
+++ b/plugin-api/beta/client/hocs/withTags.js
@@ -8,13 +8,28 @@ import {withAddTag, withRemoveTag} from 'coral-framework/graphql/mutations';
 import withFragments from 'coral-framework/hocs/withFragments';
 import {addNotification} from 'coral-framework/actions/notification';
 import {forEachError, isTagged} from 'coral-framework/utils';
+import hoistStatics from 'recompose/hoistStatics';
+import {getDefinitionName} from '../utils';
 
-export default (tag) => (WrappedComponent) => {
+/*
+ * Disable false-positive warning below, as it doesn't work well with how we currently
+ * assemble the queries.
+ *
+ * Warning: fragment with name {fragment name} already exists.
+ * graphql-tag enforces all fragment names across your application to be unique; read more about
+ * this in the docs: http://dev.apollodata.com/core/fragments.html#unique-names
+ */
+gql.disableFragmentWarnings();
+
+export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
   if (typeof tag !== 'string') {
     console.error('Tag must be a valid string');
     return null;
   }
 
+  // fragments allow the extension of the fragments defined in this HOC.
+  const {fragments = {}} = options;
+
   const Tag = capitalize(tag);
   const TAG = tag.toUpperCase();
 
@@ -68,13 +83,15 @@ export default (tag) => (WrappedComponent) => {
     }
 
     render() {
-      const {comment, user, config} = this.props;
+      const {root, asset, comment, user, config} = this.props;
 
       const alreadyTagged = isTagged(comment.tags, TAG);
 
       return <WrappedComponent
-        user={user}
+        root={root}
+        asset={asset}
         comment={comment}
+        user={user}
         alreadyTagged={alreadyTagged}
         postTag={this.postTag}
         deleteTag={this.deleteTag}
@@ -92,14 +109,26 @@ export default (tag) => (WrappedComponent) => {
 
   const enhance = compose(
     withFragments({
+      ...fragments,
+      asset: gql`
+        fragment ${Tag}Button_asset on Asset {
+          id
+          ${fragments.asset ? `...${getDefinitionName(fragments.asset)}` : ''}
+        }
+        ${fragments.asset ? fragments.asset : ''}
+      `,
       comment: gql`
         fragment ${Tag}Button_comment on Comment {
+          id
           tags {
             tag {
               name
             }
           }
-        }`
+          ${fragments.comment ? `...${getDefinitionName(fragments.comment)}` : ''}
+        }
+        ${fragments.comment ? fragments.comment : ''}
+      `
     }),
     connect(mapStateToProps, mapDispatchToProps),
     withAddTag,
@@ -109,4 +138,4 @@ export default (tag) => (WrappedComponent) => {
   WithTags.displayName = `WithTags(${getDisplayName(WrappedComponent)})`;
 
   return enhance(WithTags);
-};
+});
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Comment.js b/plugins/talk-plugin-featured-comments/client/containers/Comment.js
index 7080627e6..bba764a1d 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/Comment.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/Comment.js
@@ -31,7 +31,6 @@ export default withFragments({
           name
         }
       }
-
       user {
         id
         username
diff --git a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
index 3b564d127..7081c7ec6 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/ModTag.js
@@ -1,5 +1,16 @@
 import ModTag from '../components/ModTag';
 import {withTags} from 'plugin-api/beta/client/hocs';
+import {gql} from 'react-apollo';
 
-export default withTags('featured')(ModTag);
+const fragments = {
+  comment: gql`
+    fragment TalkFeaturedComments_ModTag_comment on Comment {
+      user {
+        username
+      }
+    }
+  `
+};
+
+export default withTags('featured', {fragments})(ModTag);
 
diff --git a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
index 4c36c5c62..a5fd3b7e8 100644
--- a/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
+++ b/plugins/talk-plugin-featured-comments/client/containers/TabPane.js
@@ -18,7 +18,7 @@ class TabPaneContainer extends React.Component {
         limit: 5,
         cursor: this.props.root.asset.featuredComments.endCursor,
         asset_id: this.props.root.asset.id,
-        sort: 'DESC',
+        sort: 'REVERSE_CHRONOLOGICAL',
         excludeIgnored: this.props.data.variables.excludeIgnored,
       },
       updateQuery: (previous, {fetchMoreResult:{comments}}) => {
diff --git a/plugins/talk-plugin-featured-comments/client/containers/Tag.js b/plugins/talk-plugin-featured-comments/client/containers/Tag.js
new file mode 100644
index 000000000..60d9e1e2b
--- /dev/null
+++ b/plugins/talk-plugin-featured-comments/client/containers/Tag.js
@@ -0,0 +1,15 @@
+import {gql} from 'react-apollo';
+import Tag from '../components/Tag';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkFeaturedComments_Tag_comment on Comment {
+      tags {
+        tag {
+          name
+        }
+      }
+    }
+  `
+})(Tag);
diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js
index c796521e9..30d59c546 100644
--- a/plugins/talk-plugin-featured-comments/client/index.js
+++ b/plugins/talk-plugin-featured-comments/client/index.js
@@ -1,5 +1,5 @@
 import Tab from './containers/Tab';
-import Tag from './components/Tag';
+import Tag from './containers/Tag';
 import Button from './components/Button';
 import TabPane from './containers/TabPane';
 import translations from './translations.yml';
diff --git a/plugins/talk-plugin-offtopic/client/containers/OffTopicTag.js b/plugins/talk-plugin-offtopic/client/containers/OffTopicTag.js
new file mode 100644
index 000000000..bf57dc5cb
--- /dev/null
+++ b/plugins/talk-plugin-offtopic/client/containers/OffTopicTag.js
@@ -0,0 +1,15 @@
+import {gql} from 'react-apollo';
+import OffTopicTag from '../components/OffTopicTag';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+
+export default withFragments({
+  comment: gql`
+    fragment TalkOfftopic_OffTopicTag_comment on Comment {
+      tags {
+        tag {
+          name
+        }
+      }
+    }
+  `
+})(OffTopicTag);
diff --git a/plugins/talk-plugin-offtopic/client/index.js b/plugins/talk-plugin-offtopic/client/index.js
index b284f7280..24bfc095f 100644
--- a/plugins/talk-plugin-offtopic/client/index.js
+++ b/plugins/talk-plugin-offtopic/client/index.js
@@ -1,5 +1,5 @@
 import translations from './translations.json';
-import OffTopicTag from './components/OffTopicTag';
+import OffTopicTag from './containers/OffTopicTag';
 import OffTopicFilter from './containers/OffTopicFilter';
 import OffTopicCheckbox from './containers/OffTopicCheckbox';
 import reducer from './reducer';
diff --git a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
index 27cbf9188..e2536f86f 100644
--- a/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
+++ b/plugins/talk-plugin-permalink/client/components/PermalinkButton.js
@@ -28,9 +28,11 @@ export default class PermalinkButton extends React.Component {
   }
 
   handleClickOutside = () => {
-    this.setState({
-      popoverOpen: false
-    });
+    if (this.state.popoverOpen) {
+      this.setState({
+        popoverOpen: false
+      });
+    }
   }
 
   copyPermalink = () => {
diff --git a/plugins/talk-plugin-permalink/client/containers/PermalinkButton.js b/plugins/talk-plugin-permalink/client/containers/PermalinkButton.js
new file mode 100644
index 000000000..5e1d11110
--- /dev/null
+++ b/plugins/talk-plugin-permalink/client/containers/PermalinkButton.js
@@ -0,0 +1,16 @@
+import {gql} from 'react-apollo';
+import PermalinkButton from '../components/PermalinkButton';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+
+export default withFragments({
+  asset: gql`
+    fragment TalkPermalink_Button_asset on Asset {
+      url
+    }
+    `,
+  comment: gql`
+    fragment TalkPermalink_Button_comment on Comment {
+      id
+    }
+  `
+})(PermalinkButton);
diff --git a/plugins/talk-plugin-permalink/client/index.js b/plugins/talk-plugin-permalink/client/index.js
index d413da870..c28c4ae71 100644
--- a/plugins/talk-plugin-permalink/client/index.js
+++ b/plugins/talk-plugin-permalink/client/index.js
@@ -1,4 +1,4 @@
-import PermalinkButton from './components/PermalinkButton';
+import PermalinkButton from './containers/PermalinkButton';
 
 export default {
   slots: {
diff --git a/services/karma.js b/services/karma.js
index a2c087eaa..687b67af0 100644
--- a/services/karma.js
+++ b/services/karma.js
@@ -19,7 +19,7 @@ const {
  *
  * The default used is:
  *
- *  comment:-1,-1;flag:-1,-1
+ *  comment:2,-2;flag:2,-2
  */
 const parseThresholds = (thresholds) => thresholds
   .split(';')
diff --git a/services/pubsub.js b/services/pubsub.js
index 780aeba16..9fc2ae902 100644
--- a/services/pubsub.js
+++ b/services/pubsub.js
@@ -1,23 +1,24 @@
 const {RedisPubSub} = require('graphql-redis-subscriptions');
+const {connectionOptions, attachMonitors} = require('./redis');
 
-const {connectionOptions} = require('./redis');
+/**
+ * getClient returns the pubsub singleton for this instance.
+ */
+let pubsub = null;
+const getClient = () => {
+  if (pubsub !== null) {
+    return pubsub;
+  }
 
-const createClient = () => new RedisPubSub({connection: connectionOptions});
+  pubsub = new RedisPubSub({connection: connectionOptions});
 
-const createClientFactory = () => {
-  let ins = null;
-  return () => {
-    if (ins) {
-      return ins;
-    }
+  // Attach the node monitors to the subscriber + publishers.
+  attachMonitors(pubsub.redisPublisher);
+  attachMonitors(pubsub.redisSubscriber);
 
-    ins = createClient();
-
-    return ins;
-  };
+  return pubsub;
 };
 
 module.exports = {
-  createClient,
-  createClientFactory
+  getClient,
 };
diff --git a/services/redis.js b/services/redis.js
index 1983249f1..b87e5e9fd 100644
--- a/services/redis.js
+++ b/services/redis.js
@@ -1,45 +1,80 @@
 const redis = require('redis');
 const debug = require('debug')('talk:services:redis');
+const enabled = require('debug').enabled('talk:services:redis');
 const {
-  REDIS_URL
+  REDIS_URL,
+  REDIS_RECONNECTION_MAX_ATTEMPTS,
+  REDIS_RECONNECTION_MAX_RETRY_TIME,
+  REDIS_RECONNECTION_BACKOFF_FACTOR,
+  REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME,
 } = require('../config');
 
+const attachMonitors = (client) => {
+  debug('client created');
+
+  // Debug events.
+  if (enabled) {
+    client.on('ready', () => debug('client ready'));
+    client.on('connect', () => debug('client connected'));
+    client.on('reconnecting', () => debug('client connection lost, attempting to reconnect'));
+    client.on('end', () => debug('client ended'));
+  }
+
+  // Error events.
+  client.on('error', (err) => {
+    if (err) {
+      console.error('Error connecting to redis:', err);
+    }
+  });
+};
+
 const connectionOptions = {
   url: REDIS_URL,
   retry_strategy: function(options) {
-    if (options.error && options.error.code === 'ECONNREFUSED') {
+    if (options.error && options.error.code !== 'ECONNREFUSED') {
+
+      debug('retry strategy: none, an error occured');
 
       // End reconnecting on a specific error and flush all commands with a individual error
-      return new Error('The server refused the connection');
+      return options.error;
     }
-    if (options.total_retry_time > 1000 * 60 * 60) {
+    if (options.total_retry_time > REDIS_RECONNECTION_MAX_RETRY_TIME) {
+
+      debug('retry strategy: none, exhausted retry time');
 
       // End reconnecting after a specific timeout and flush all commands with a individual error
       return new Error('Retry time exhausted');
     }
 
-    if (options.times_connected > 10) {
+    if (options.attempt > REDIS_RECONNECTION_MAX_ATTEMPTS) {
+
+      debug('retry strategy: none, exhausted retry attempts');
 
       // End reconnecting with built in error
       return undefined;
     }
 
     // reconnect after
-    return Math.max(options.attempt * 100, 3000);
+    const delay = Math.max(options.attempt * REDIS_RECONNECTION_BACKOFF_FACTOR, REDIS_RECONNECTION_BACKOFF_MINIMUM_TIME);
+
+    debug(`retry strategy: try to reconnect ${delay} ms from now`);
+
+    return delay;
   }
 };
 
 const createClient = () => {
   let client = redis.createClient(connectionOptions);
 
+  // Attach the monitors that will print debug messages to the console.
+  attachMonitors(client);
+
   client.ping((err) => {
     if (err) {
       console.error('Can\'t ping the redis server!');
 
       throw err;
     }
-
-    debug('connection established');
   });
 
   return client;
@@ -47,12 +82,13 @@ const createClient = () => {
 
 module.exports = {
   connectionOptions,
+  attachMonitors,
   createClient,
   createClientFactory: () => {
     let client = null;
 
     return () => {
-      if (client) {
+      if (client !== null) {
         return client;
       }