ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

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

Browse Source 
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
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/sites/[id]/page.tsx
View File

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