From 07f5f42870aab517d8d6d387e5a894a972fadd85 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 5 Sep 2017 00:16:27 +0700
Subject: [PATCH] Optimized render

---
 plugin-api/beta/client/utils/index.js         |  1 +
 .../client/containers/AuthorName.js           | 20 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/plugin-api/beta/client/utils/index.js b/plugin-api/beta/client/utils/index.js
index 6dd18f3a1..3fe742569 100644
--- a/plugin-api/beta/client/utils/index.js
+++ b/plugin-api/beta/client/utils/index.js
@@ -7,4 +7,5 @@ export {
   capitalize,
   getErrorMessages,
   getDefinitionName,
+  getShallowChanges,
 } from 'coral-framework/utils';
diff --git a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js b/plugins/talk-plugin-author-menu/client/containers/AuthorName.js
index 9d9188167..78663b603 100644
--- a/plugins/talk-plugin-author-menu/client/containers/AuthorName.js
+++ b/plugins/talk-plugin-author-menu/client/containers/AuthorName.js
@@ -4,10 +4,28 @@ import {bindActionCreators} from 'redux';
 import AuthorName from '../components/AuthorName';
 import {setContentSlot, resetContentSlot, openMenu, closeMenu} from '../actions';
 import {compose, gql} from 'react-apollo';
-import {getSlotFragmentSpreads} from 'plugin-api/beta/client/utils';
+import {getSlotFragmentSpreads, getShallowChanges} from 'plugin-api/beta/client/utils';
 
 class AuthorNameContainer extends React.Component {
 
+  shouldComponentUpdate(nextProps) {
+
+    // Specifically handle `showMenuForComment` if it is the only change.
+    const changes = getShallowChanges(this.props, nextProps);
+    if (changes.length === 1 && changes[0] === 'showMenuForComment') {
+      const commentId = this.props.comment.id;
+      if (
+        commentId !== this.props.showMenuForComment &&
+        commentId !== nextProps.showMenuForComment
+      ) {
+        return false;
+      }
+    }
+
+    // Prevent Slot from rerendering when no props has shallowly changed.
+    return changes.length !== 0;
+  }
+
   toggleMenu = () => {
     if (this.props.showMenuForComment === this.props.comment.id) {
       this.props.closeMenu();