Problem Description
Date formatting can cause hydration mismatches when server and client render different relative times.
Context
Relative time strings like 'in 2 days' may differ between server render and client hydration.
Files to Investigate
src/lib/date-utils.ts - getRelativeTime function
src/components/event-card.tsx - Time display
Steps to Reproduce
- View events list page
- Check browser console for hydration warnings
- Relative times may differ by seconds
Expected Behavior
Date formatting should not cause hydration mismatches.
Acceptance Criteria
Suggested Approach
Use suppressHydrationWarning or render dates client-side only with useEffect.
Difficulty: Hard
Estimated time: 3-6 hours
Prerequisites: React hydration, SSR concepts
Learning outcomes: SSR best practices, hydration debugging
Problem Description
Date formatting can cause hydration mismatches when server and client render different relative times.
Context
Relative time strings like 'in 2 days' may differ between server render and client hydration.
Files to Investigate
src/lib/date-utils.ts- getRelativeTime functionsrc/components/event-card.tsx- Time displaySteps to Reproduce
Expected Behavior
Date formatting should not cause hydration mismatches.
Acceptance Criteria
Suggested Approach
Use suppressHydrationWarning or render dates client-side only with useEffect.
Difficulty: Hard
Estimated time: 3-6 hours
Prerequisites: React hydration, SSR concepts
Learning outcomes: SSR best practices, hydration debugging