Scope 1s tick interval to Chart component to eliminate page-level re-renders
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 <noreply@anthropic.com>
This commit is contained in:
@@ -100,7 +100,6 @@ export default function SiteDashboardPage() {
|
|||||||
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
|
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
|
||||||
const [isExportModalOpen, setIsExportModalOpen] = useState(false)
|
const [isExportModalOpen, setIsExportModalOpen] = useState(false)
|
||||||
const lastUpdatedAtRef = useRef<number | null>(null)
|
const lastUpdatedAtRef = useRef<number | null>(null)
|
||||||
const [, setTick] = useState(0)
|
|
||||||
|
|
||||||
// Dimension filters state
|
// Dimension filters state
|
||||||
const searchParams = useSearchParams()
|
const searchParams = useSearchParams()
|
||||||
@@ -374,12 +373,6 @@ export default function SiteDashboardPage() {
|
|||||||
if (overview) lastUpdatedAtRef.current = Date.now()
|
if (overview) lastUpdatedAtRef.current = Date.now()
|
||||||
}, [overview])
|
}, [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
|
// Save settings to localStorage
|
||||||
const saveSettings = (type: string, newDateRange?: { start: string; end: string }) => {
|
const saveSettings = (type: string, newDateRange?: { start: string; end: string }) => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -161,6 +161,14 @@ export default function Chart({
|
|||||||
const { resolvedTheme } = useTheme()
|
const { resolvedTheme } = useTheme()
|
||||||
const [showComparison, setShowComparison] = useState(false)
|
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 ─────────────────────────────────────────────
|
// ─── Annotation state ─────────────────────────────────────────────
|
||||||
const [annotationForm, setAnnotationForm] = useState<{
|
const [annotationForm, setAnnotationForm] = useState<{
|
||||||
visible: boolean; editingId?: string; date: string; time: string; text: string; category: string
|
visible: boolean; editingId?: string; date: string; time: string; text: string; category: string
|
||||||
|
|||||||
Reference in New Issue
Block a user