From c66c100dcbc5b9347ed166ca9a63514c78cc17f5 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 14 Dec 2017 20:27:19 +0100
Subject: [PATCH] Cache callbacks to preserve immutability

---
 .../Moderation/components/ModerationQueue.js   | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
index c3977c7bb..6abe37d25 100644
--- a/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
+++ b/client/coral-admin/src/routes/Moderation/components/ModerationQueue.js
@@ -81,6 +81,10 @@ const cache = new CellMeasurerCache({
 
 class ModerationQueue extends React.Component {
   listRef = null;
+  callbackCaches = {
+    clearHeightCache: {},
+    selectCommentId: {},
+  };
 
   constructor(props) {
     super(props);
@@ -286,6 +290,16 @@ class ModerationQueue extends React.Component {
     }
     else {
       const comment = view[index];
+
+      // Use callback cache so not to change the identity of these arrow functions.
+      // Otherwise shallow compare will fail to optimize.
+      if (!this.callbackCaches.clearHeightCache[index]) {
+        this.callbackCaches.clearHeightCache[index] = () => this.reflowList(index);
+      }
+      if (!this.callbackCaches.selectCommentId[comment.id]) {
+        this.callbackCaches.selectCommentId[comment.id] = () => this.props.selectCommentId(comment.id);
+      }
+
       key = comment.id;
       child = (
         <div
@@ -304,8 +318,8 @@ class ModerationQueue extends React.Component {
             rejectComment={this.props.rejectComment}
             currentAsset={this.props.currentAsset}
             currentUserId={this.props.currentUserId}
-            clearHeightCache={() => this.reflowList(index)}
-            selectComment={() => this.props.selectCommentId(comment.id)}
+            clearHeightCache={this.callbackCaches.clearHeightCache[index]}
+            selectComment={this.callbackCaches.selectCommentId[comment.id]}
           />
         </div>
       );