From 8d1d2d2cf0753914c23890808a2a35af1731f1d4 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 28 Jun 2021 16:38:48 +0800
Subject: [PATCH] RecommendedContent: prevent excessive render

## Issue
When seeking on a video, RecommendedContent gets re-rendered, which causes the 20 ClaimPreviews to be re-rendered, several times. ClaimPreview has lots of children, plus it's constantly checking against the blacklist, among other things.

## Fix
The culprit seems to be the `recommendedContent` array -- the address may be different, but the contents are the same.
Do a deep compare instead.
---
 ui/component/recommendedContent/view.jsx | 40 +++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/ui/component/recommendedContent/view.jsx b/ui/component/recommendedContent/view.jsx
index 946eec9ce..9697fbda4 100644
--- a/ui/component/recommendedContent/view.jsx
+++ b/ui/component/recommendedContent/view.jsx
@@ -23,7 +23,7 @@ type Props = {
   claim: ?StreamClaim,
 };
 
-export default function RecommendedContent(props: Props) {
+export default React.memo<Props>(function RecommendedContent(props: Props) {
   const {
     uri,
     doFetchRecommendedContent,
@@ -121,4 +121,42 @@ export default function RecommendedContent(props: Props) {
       }
     />
   );
+}, areEqual);
+
+function areEqual(prevProps: Props, nextProps: Props) {
+  const a = prevProps;
+  const b = nextProps;
+
+  if (
+    a.uri !== b.uri ||
+    a.nextRecommendedUri !== b.nextRecommendedUri ||
+    a.isAuthenticated !== b.isAuthenticated ||
+    a.isSearching !== b.isSearching ||
+    a.mature !== b.mature ||
+    (a.recommendedContent && !b.recommendedContent) ||
+    (!a.recommendedContent && b.recommendedContent) ||
+    (a.claim && !b.claim) ||
+    (!a.claim && b.claim)
+  ) {
+    return false;
+  }
+
+  if (a.claim && b.claim && a.claim.claim_id !== b.claim.claim_id) {
+    return false;
+  }
+
+  if (a.recommendedContent && b.recommendedContent) {
+    if (a.recommendedContent.length !== b.recommendedContent.length) {
+      return false;
+    }
+
+    let i = a.recommendedContent.length;
+    while (i--) {
+      if (a.recommendedContent[i] !== b.recommendedContent[i]) {
+        return false;
+      }
+    }
+  }
+
+  return true;
 }