Fix ActivityFeed hydration error: Move localStorage read to useEffect to prevent server/client mismatch
All checks were successful
Production Deployment (Zero Downtime) / deploy-production (push) Successful in 12m10s

This commit is contained in:
2026-01-10 18:28:25 +01:00
parent 2defd7a4a9
commit ede591c89e

View File

@@ -50,30 +50,34 @@ interface StatusData {
} }
export default function ActivityFeed() { export default function ActivityFeed() {
const [mounted, setMounted] = useState(false);
const [data, setData] = useState<StatusData | null>(null); const [data, setData] = useState<StatusData | null>(null);
const [isExpanded, setIsExpanded] = useState(true); const [isExpanded, setIsExpanded] = useState(true);
const [isMinimized, setIsMinimized] = useState(false); const [isMinimized, setIsMinimized] = useState(false);
const [hasActivity, setHasActivity] = useState(false); const [hasActivity, setHasActivity] = useState(false);
const [isTrackingEnabled, setIsTrackingEnabled] = useState(() => { // Initialize with default value to prevent hydration mismatch
// Check localStorage for tracking preference const [isTrackingEnabled, setIsTrackingEnabled] = useState(true);
const [quote, setQuote] = useState<{
content: string;
author: string;
} | null>(null);
// Load tracking preference from localStorage after mount to prevent hydration mismatch
useEffect(() => {
setMounted(true);
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
try { try {
const stored = localStorage.getItem("activityTrackingEnabled"); const stored = localStorage.getItem("activityTrackingEnabled");
return stored !== "false"; // Default to true if not set setIsTrackingEnabled(stored !== "false"); // Default to true if not set
} catch (error) { } catch (error) {
// localStorage might be disabled // localStorage might be disabled
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
console.warn('Failed to read tracking preference:', error); console.warn('Failed to read tracking preference:', error);
} }
return true; // Default to enabled setIsTrackingEnabled(true); // Default to enabled
} }
} }
return true; }, []);
});
const [quote, setQuote] = useState<{
content: string;
author: string;
} | null>(null);
// Fetch data every 30 seconds (optimized to match server cache) // Fetch data every 30 seconds (optimized to match server cache)
useEffect(() => { useEffect(() => {
@@ -1456,6 +1460,9 @@ export default function ActivityFeed() {
} }
}; };
// Don't render until mounted to prevent hydration mismatch
if (!mounted) return null;
// Don't render if tracking is disabled and no data // Don't render if tracking is disabled and no data
if (!isTrackingEnabled && !data) return null; if (!isTrackingEnabled && !data) return null;