Reduce the chain of renders when Viewer Count is updated

3 layer of components were rendered because of the viewer-count update.  Only `fileViewCount` needs the value, so let it grab from redux directly.

ui/component/fileSubtitle/view.jsx

@@ -8,12 +8,11 @@ import ClaimPreviewReset from 'component/claimPreviewReset';
 type Props = {
   uri: string,
   livestream?: boolean,
-  activeViewers?: number,
   isLive?: boolean,
 };
 
 function FileSubtitle(props: Props) {
-  const { uri, livestream = false, activeViewers, isLive = false } = props;
+  const { uri, livestream = false, isLive = false } = props;
 
   return (
     <>
@@ -21,7 +20,7 @@ function FileSubtitle(props: Props) {
         <div className="file__viewdate">
           {livestream ? <span>{__('Right now')}</span> : <DateTime uri={uri} show={DateTime.SHOW_DATE} />}
 
-          <FileViewCount uri={uri} livestream={livestream} activeViewers={activeViewers} isLive={isLive} />
+          <FileViewCount uri={uri} livestream={livestream} isLive={isLive} />
         </div>
 
         <FileActions uri={uri} hideRepost={livestream} livestream={livestream} />

ui/component/fileTitleSection/index.js

@@ -2,18 +2,15 @@ import { connect } from 'react-redux';
 import { doFetchSubCount, selectSubCountForUri } from 'lbryinc';
 import { selectTitleForUri, selectClaimForUri } from 'redux/selectors/claims';
 import { makeSelectInsufficientCreditsForUri } from 'redux/selectors/content';
-import { selectViewersForId } from 'redux/selectors/livestream';
 import FileTitleSection from './view';
 
 const select = (state, props) => {
   const claim = selectClaimForUri(state, props.uri);
-  const viewers = claim && selectViewersForId(state, claim.claim_id);
   const channelClaimId = claim && claim.signing_channel ? claim.signing_channel.claim_id : undefined;
   const channelUri = claim && claim.signing_channel ? claim.signing_channel.canonical_url : undefined;
   const subCount = channelUri && selectSubCountForUri(state, channelUri);
 
   return {
-    viewers,
     isInsufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
     title: selectTitleForUri(state, props.uri),
     channelClaimId,

ui/component/fileTitleSection/view.jsx

@@ -21,7 +21,6 @@ type Props = {
   isNsfwBlocked: boolean,
   livestream?: boolean,
   isLive?: boolean,
-  viewers?: number,
   subCount: number,
   channelClaimId?: string,
   fetchSubCount: (string) => void,
@@ -35,7 +34,6 @@ function FileTitleSection(props: Props) {
     isNsfwBlocked,
     livestream = false,
     isLive = false,
-    viewers,
     subCount,
     channelClaimId,
     fetchSubCount,
@@ -66,7 +64,7 @@ function FileTitleSection(props: Props) {
         body={
           <React.Fragment>
             <ClaimInsufficientCredits uri={uri} />
-            <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} activeViewers={viewers} />
+            <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} />
           </React.Fragment>
         }
         actions={

ui/component/fileViewCount/index.js

@@ -1,13 +1,18 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'redux/selectors/claims';
+import { selectClaimIdForUri } from 'redux/selectors/claims';
+import { selectViewersForId } from 'redux/selectors/livestream';
 import { doFetchViewCount, selectViewCountForUri } from 'lbryinc';
 import { doAnalyticsView } from 'redux/actions/app';
 import FileViewCount from './view';
 
-const select = (state, props) => ({
+const select = (state, props) => {
-  claim: makeSelectClaimForUri(props.uri)(state),
+  const claimId = selectClaimIdForUri(state, props.uri);
-  viewCount: selectViewCountForUri(state, props.uri),
+  return {
-});
+    claimId,
+    viewCount: selectViewCountForUri(state, props.uri),
+    activeViewers: props.livestream && props.isLive && claimId ? selectViewersForId(state, claimId) : undefined,
+  };
+};
 
 const perform = (dispatch) => ({
   fetchViewCount: (claimId) => dispatch(doFetchViewCount(claimId)),

ui/component/fileViewCount/view.jsx

@@ -4,20 +4,19 @@ import React from 'react';
 import HelpLink from 'component/common/help-link';
 
 type Props = {
-  claim: ?StreamClaim,
+  livestream?: boolean,
+  isLive?: boolean,
+  // --- redux ---
+  claimId: ?string,
   fetchViewCount: (string) => void,
-  fetchingViewCount: boolean,
   uri: string,
   viewCount: string,
-  livestream?: boolean,
   activeViewers?: number,
-  isLive?: boolean,
   doAnalyticsView: (string) => void,
 };
 
 function FileViewCount(props: Props) {
-  const { claim, uri, fetchViewCount, viewCount, livestream, activeViewers, isLive = false, doAnalyticsView } = props;
+  const { claimId, uri, fetchViewCount, viewCount, livestream, activeViewers, isLive = false, doAnalyticsView } = props;
-  const claimId = claim && claim.claim_id;
 
   React.useEffect(() => {
     if (livestream) {

ui/component/livestreamComments/view.jsx

@@ -16,7 +16,6 @@ import { parseSticker } from 'util/comments';
 type Props = {
   uri: string,
   claim: ?StreamClaim,
-  activeViewers: number,
   embed?: boolean,
   doCommentSocketConnect: (string, string) => void,
   doCommentSocketDisconnect: (string) => void,