From 875128fc94f45341a915197fe224e2867f83c2d0 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 4 Oct 2021 18:55:03 +0800
Subject: [PATCH] Comment: fix memoization for multi-instance selector.

Since each comment will have a different key (and on other components, `props.uri` will differ), the selector cache won't work since the inputs keep changing.

The suggested solution is to apply a factory method wrap the selector -- this produces a unique memoized selector for each instance.
---
 ui/component/comment/index.js | 38 ++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/ui/component/comment/index.js b/ui/component/comment/index.js
index 901b8cd3b..8ceae35d7 100644
--- a/ui/component/comment/index.js
+++ b/ui/component/comment/index.js
@@ -19,24 +19,30 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectPlayingUri } from 'redux/selectors/content';
 import Comment from './view';
 
-const select = (state, props) => {
-  const activeChannelClaim = selectActiveChannelClaim(state);
+const makeMapStateToProps = (originalState, originalProps) => {
+  const activeChannelClaim = selectActiveChannelClaim(originalState);
   const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
-  const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
+  const reactionKey = activeChannelId ? `${originalProps.commentId}:${activeChannelId}` : originalProps.commentId;
+  const selectOthersReactionsForComment = makeSelectOthersReactionsForComment(reactionKey);
 
-  return {
-    claim: makeSelectClaimForUri(props.uri)(state),
-    thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
-    channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
-    commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
-    othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
-    activeChannelClaim,
-    myChannels: selectMyChannelClaims(state),
-    playingUri: selectPlayingUri(state),
-    stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),
-    linkedCommentAncestors: selectLinkedCommentAncestors(state),
-    totalReplyPages: makeSelectTotalReplyPagesForParentId(props.commentId)(state),
+  const select = (state, props) => {
+    const othersReacts = selectOthersReactionsForComment(state);
+
+    return {
+      claim: makeSelectClaimForUri(props.uri)(state),
+      thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
+      channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
+      commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+      othersReacts,
+      activeChannelClaim,
+      myChannels: selectMyChannelClaims(state),
+      playingUri: selectPlayingUri(state),
+      stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),
+      linkedCommentAncestors: selectLinkedCommentAncestors(state),
+      totalReplyPages: makeSelectTotalReplyPagesForParentId(props.commentId)(state),
+    };
   };
+  return select;
 };
 
 const perform = (dispatch) => ({
@@ -47,4 +53,4 @@ const perform = (dispatch) => ({
   doToast: (options) => dispatch(doToast(options)),
 });
 
-export default connect(select, perform)(Comment);
+export default connect(makeMapStateToProps, perform)(Comment);