Use ref for lastUpdatedAt to avoid extra re-render on mount

When navigating to dashboard with cached SWR data, setLastUpdatedAt
triggered a second full render of the entire dashboard immediately
after the first. Using a ref instead avoids this — the value still
updates and Chart reads it on the next 1-second tick re-render.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Usman Baig
2026-03-10 01:03:12 +01:00
parent a60efeb6a7
commit a9f42acbf6

View File

@@ -2,7 +2,7 @@
import { logger } from '@/lib/utils/logger'
import { useCallback, useEffect, useState, useMemo } from 'react'
import { useCallback, useEffect, useRef, useState, useMemo } from 'react'
import { useParams, useRouter, useSearchParams } from 'next/navigation'
import {
getPerformanceByPage,
@@ -99,7 +99,7 @@ export default function SiteDashboardPage() {
)
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
const [isExportModalOpen, setIsExportModalOpen] = useState(false)
const [lastUpdatedAt, setLastUpdatedAt] = useState<number | null>(null)
const lastUpdatedAtRef = useRef<number | null>(null)
const [, setTick] = useState(0)
// Dimension filters state
@@ -371,7 +371,7 @@ export default function SiteDashboardPage() {
// Track when data was last updated (for "Live · Xs ago" display)
useEffect(() => {
if (overview) setLastUpdatedAt(Date.now())
if (overview) lastUpdatedAtRef.current = Date.now()
}, [overview])
// Tick every 1s so "Live · Xs ago" counts in real time
@@ -537,7 +537,7 @@ export default function SiteDashboardPage() {
setTodayInterval={setTodayInterval}
multiDayInterval={multiDayInterval}
setMultiDayInterval={setMultiDayInterval}
lastUpdatedAt={lastUpdatedAt}
lastUpdatedAt={lastUpdatedAtRef.current}
annotations={annotations}
canManageAnnotations={true}
onCreateAnnotation={handleCreateAnnotation}