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.
This commit is contained in:
parent
c80b6d3f60
commit
8d1d2d2cf0
1 changed files with 39 additions and 1 deletions
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue