From dc961b98ac96600818538c63032ef90933bb1a93 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 5 Oct 2021 15:25:56 +0800
Subject: [PATCH] CommentReactions: optimize othersReacts selection

One solution is to apply the same factory method used in `Comments` to memoize the selector for each key. Unfortunately, I'm not sure how to re-use the same factory for both `Comments` and `CommentReactions`, so we will be memoizing it twice. This feels a bit dumb.

Since `CommentReactions` is almost-always** a child of `Comments` and using the same comment key, just get the calculated value from the parent through an optional prop.

** notifications uses it too, but I guess we can be inefficient there since it's not a component that's constantly updating.
---
 ui/component/comment/view.jsx          | 4 +++-
 ui/component/commentReactions/index.js | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index b4816303a..0ca6b5405 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -361,7 +361,9 @@ function Comment(props: Props) {
                         icon={ICONS.REPLY}
                       />
                     )}
-                    {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
+                    {ENABLE_COMMENT_REACTIONS && (
+                      <CommentReactions uri={uri} commentId={commentId} othersReacts={othersReacts} />
+                    )}
                   </div>
                 )}
 
diff --git a/ui/component/commentReactions/index.js b/ui/component/commentReactions/index.js
index 0bafedfca..cb3a61e8c 100644
--- a/ui/component/commentReactions/index.js
+++ b/ui/component/commentReactions/index.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import Comment from './view';
+import CommentReactions from './view';
 import { makeSelectClaimIsMine, makeSelectClaimForUri, doResolveUri } from 'lbry-redux';
 import { doToast } from 'redux/actions/notifications';
 import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
@@ -15,7 +15,7 @@ const select = (state, props) => {
     claim: makeSelectClaimForUri(props.uri)(state),
     claimIsMine: makeSelectClaimIsMine(props.uri)(state),
     myReacts: makeSelectMyReactionsForComment(reactionKey)(state),
-    othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
+    othersReacts: props.othersReacts || makeSelectOthersReactionsForComment(reactionKey)(state),
     activeChannelId,
   };
 };
@@ -26,4 +26,4 @@ const perform = (dispatch) => ({
   doToast: (params) => dispatch(doToast(params)),
 });
 
-export default connect(select, perform)(Comment);
+export default connect(select, perform)(CommentReactions);