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:
infinite-persistence 2021-06-28 16:38:48 +08:00 committed by Jeremy Kauffman
parent c80b6d3f60
commit 8d1d2d2cf0

View file

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