mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
perf: Fix unnecessary renders in useCurrentTime hook and ModQueueView footer
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user