From 3587f936455f5f802e1ac17cbad436a8daa230e8 Mon Sep 17 00:00:00 2001 From: Usman Baig Date: Tue, 10 Mar 2026 01:19:34 +0100 Subject: [PATCH] Scope 1s tick interval to Chart component to eliminate page-level re-renders MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The setInterval that drives the "Live · Xs ago" display was at the page level, forcing all 10+ dashboard components to re-render every second. Now it lives inside Chart — the only consumer — so the rest of the dashboard is unaffected. Co-Authored-By: Claude Opus 4.6 --- app/sites/[id]/page.tsx | 7 ------- components/dashboard/Chart.tsx | 8 ++++++++ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx index d4ba1b9..0488ecb 100644 --- a/app/sites/[id]/page.tsx +++ b/app/sites/[id]/page.tsx @@ -100,7 +100,6 @@ export default function SiteDashboardPage() { const [isDatePickerOpen, setIsDatePickerOpen] = useState(false) const [isExportModalOpen, setIsExportModalOpen] = useState(false) const lastUpdatedAtRef = useRef(null) - const [, setTick] = useState(0) // Dimension filters state const searchParams = useSearchParams() @@ -374,12 +373,6 @@ export default function SiteDashboardPage() { if (overview) lastUpdatedAtRef.current = Date.now() }, [overview]) - // Tick every 1s so "Live · Xs ago" counts in real time - useEffect(() => { - const timer = setInterval(() => setTick((t) => t + 1), 1000) - return () => clearInterval(timer) - }, []) - // Save settings to localStorage const saveSettings = (type: string, newDateRange?: { start: string; end: string }) => { try { diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx index 89faa38..d40cad7 100644 --- a/components/dashboard/Chart.tsx +++ b/components/dashboard/Chart.tsx @@ -161,6 +161,14 @@ export default function Chart({ const { resolvedTheme } = useTheme() const [showComparison, setShowComparison] = useState(false) + // Tick every 1s so "Live · Xs ago" counts in real time (scoped to Chart only) + const [, setTick] = useState(0) + useEffect(() => { + if (lastUpdatedAt == null) return + const timer = setInterval(() => setTick((t) => t + 1), 1000) + return () => clearInterval(timer) + }, [lastUpdatedAt]) + // ─── Annotation state ───────────────────────────────────────────── const [annotationForm, setAnnotationForm] = useState<{ visible: boolean; editingId?: string; date: string; time: string; text: string; category: string