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
All checks were successful
Production Deployment (Zero Downtime) / deploy-production (push) Successful in 12m10s
This commit is contained in:
@@ -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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user