perf: Fix unnecessary renders in useCurrentTime hook and ModQueueView footer

This commit is contained in:
plebeius
2026-01-08 17:16:29 +01:00
parent 402313107c
commit 404b613b44
2 changed files with 23 additions and 12 deletions
+1 -4
View File
@@ -12,10 +12,7 @@ export const useCurrentTime = (updateIntervalSeconds = 60) => {
const [currentTime, setCurrentTime] = useState(() => Date.now() / 1000); const [currentTime, setCurrentTime] = useState(() => Date.now() / 1000);
useEffect(() => { useEffect(() => {
// Update immediately on mount // Update periodically
setCurrentTime(Date.now() / 1000);
// Then update periodically
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
setCurrentTime(Date.now() / 1000); setCurrentTime(Date.now() / 1000);
}, updateIntervalSeconds * 1000); }, updateIntervalSeconds * 1000);
+22 -8
View File
@@ -19,6 +19,20 @@ interface ModQueueViewProps {
boardIdentifier?: string; // If provided, shows queue for single board boardIdentifier?: string; // If provided, shows queue for single board
} }
interface ModQueueFooterProps {
hasMore: boolean;
loadingStateString: string;
}
// Defined outside ModQueueView to preserve component identity across renders (Virtuoso optimization)
const ModQueueFooter = ({ hasMore, loadingStateString }: ModQueueFooterProps) => {
return hasMore ? (
<div style={{ padding: '10px', textAlign: 'center' }}>
<LoadingEllipsis string={loadingStateString} />
</div>
) : null;
};
interface ModQueueRowProps { interface ModQueueRowProps {
comment: Comment; comment: Comment;
showBoardColumn?: boolean; showBoardColumn?: boolean;
@@ -281,13 +295,13 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
const showBoardColumn = !resolvedAddress && !selectedBoardFilter; const showBoardColumn = !resolvedAddress && !selectedBoardFilter;
const Footer = () => { // Memoize footer components object to preserve identity across renders (Virtuoso optimization)
return hasMore ? ( const footerComponents = useMemo(
<div style={{ padding: '10px', textAlign: 'center' }}> () => ({
<LoadingEllipsis string={loadingStateString} /> Footer: () => <ModQueueFooter hasMore={hasMore} loadingStateString={loadingStateString} />,
</div> }),
) : null; [hasMore, loadingStateString],
}; );
return ( return (
<div className={styles.container}> <div className={styles.container}>
@@ -327,7 +341,7 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
totalCount={feed.length} totalCount={feed.length}
endReached={loadMore} endReached={loadMore}
itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} />} itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} />}
components={{ Footer }} components={footerComponents}
/> />
</> </>
)} )}