denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(activity-feed): avoid hydration mismatch from localStorage

Browse Source 
Read tracking preference after mount instead of during initial render to prevent SSR/client divergence that can leave the feed stuck in its initial (small/transparent) styles after page reload.

Co-authored-by: dennis <dennis@konkol.net>
This commit is contained in:
Cursor Agent
2026-01-14 11:03:59 +00:00
parent 1d2c8cee09
commit a19293eda4
1 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/ActivityFeed.tsx
View File

@@ -54,27 +54,31 @@ export default function ActivityFeed() {
const [isExpanded, setIsExpanded] = useState(true);
const [isMinimized, setIsMinimized] = useState(false);
const [hasActivity, setHasActivity] = useState(false);
const [isTrackingEnabled, setIsTrackingEnabled] = useState(() => {
// Check localStorage for tracking preference
if (typeof window !== "undefined") {
try {
const stored = localStorage.getItem("activityTrackingEnabled");
return stored !== "false"; // Default to true if not set
} catch (error) {
// localStorage might be disabled
if (process.env.NODE_ENV === 'development') {
console.warn('Failed to read tracking preference:', error);
}
return true; // Default to enabled
}
}
return true;
});
// NOTE: Don't read localStorage during initial render.
// Doing so can cause a hydration mismatch (SSR default vs client preference),
// which can leave the feed stuck in its initial (small/transparent) motion styles.
const [isTrackingEnabled, setIsTrackingEnabled] = useState(true);
const [quote, setQuote] = useState<{
content: string;
author: string;
} | null>(null);
// Sync tracking preference after mount (client-only)
useEffect(() => {
if (typeof window === "undefined") return;
try {
const stored = localStorage.getItem("activityTrackingEnabled");
const enabled = stored !== "false"; // Default to true if not set
setIsTrackingEnabled(enabled);
} catch (error) {
// localStorage might be disabled
if (process.env.NODE_ENV === "development") {
console.warn("Failed to read tracking preference:", error);
}
// Keep default (enabled)
}
}, []);
// Fetch data every 30 seconds (optimized to match server cache)
useEffect(() => {
// Don't fetch if tracking is disabled or during SSR