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.
This commit is contained in:
infinite-persistence 2021-11-17 17:23:01 +08:00
parent 01f771c6ca
commit b69c1ec5fe
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
6 changed files with 18 additions and 21 deletions

View file

@ -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} />

View file

@ -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,

View file

@ -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={

View file

@ -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) => ({
claim: makeSelectClaimForUri(props.uri)(state),
viewCount: selectViewCountForUri(state, props.uri),
});
const select = (state, props) => {
const claimId = selectClaimIdForUri(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)),

View file

@ -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 = claim && claim.claim_id;
const { claimId, uri, fetchViewCount, viewCount, livestream, activeViewers, isLive = false, doAnalyticsView } = props;
React.useEffect(() => {
if (livestream) {

View file

@ -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,