From 31523d769aae8ce93cc24555957b801fa6cad146 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 20 Sep 2021 16:42:41 +0800
Subject: [PATCH] ClaimPreviewTile: render optimization

The `Date` object and blocklist arrays causes unnecessary render since their references are always different in the shallow-compare.
---
 ui/component/claimPreviewTile/view.jsx | 32 +++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx
index 871a9ef32..1372e5918 100644
--- a/ui/component/claimPreviewTile/view.jsx
+++ b/ui/component/claimPreviewTile/view.jsx
@@ -276,4 +276,34 @@ function ClaimPreviewTile(props: Props) {
   );
 }
 
-export default withRouter(ClaimPreviewTile);
+export default React.memo<Props>(withRouter(ClaimPreviewTile), areEqual);
+
+const BLOCKLIST_KEYS = ['blackListedOutpoints', 'filteredOutpoints', 'blockedChannelUris'];
+const HANDLED_KEYS = [...BLOCKLIST_KEYS, 'date'];
+
+function areEqual(prev: Props, next: Props) {
+  for (let i = 0; i < BLOCKLIST_KEYS.length; ++i) {
+    const key = BLOCKLIST_KEYS[i];
+    const a = prev[key];
+    const b = next[key];
+
+    if (((!a || !b) && a !== b) || (a && b && a.length !== b.length)) {
+      // The arrays are huge, so just compare the length instead of each entry.
+      return false;
+    }
+  }
+
+  if (Number(prev.date) !== Number(next.date)) {
+    return false;
+  }
+
+  const propKeys = Object.keys(next);
+  for (let i = 0; i < propKeys.length; ++i) {
+    const pk = propKeys[i];
+    if (!HANDLED_KEYS.includes(pk) && prev[pk] !== next[pk]) {
+      return false;
+    }
+  }
+
+  return true;
+}