Question

React hydration fails only when I format a date in production

Actual result

The server renders 28/08/2026, but some browsers render 8/28/2026 during hydration.

export function PublishedAt({ date }: { date: Date }) {
  return <time>{date.toLocaleDateString()}</time>;
}

The error disappears after client navigation. How can I keep the date accessible and avoid hiding the warning?

posted by Lina Park · 642 views

2 answers

Make the server output deterministic by choosing the locale and time zone explicitly.

const formatter = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'medium',
  timeZone: 'UTC',
});

return <time dateTime={date.toISOString()}>{formatter.format(date)}</time>;

Do not use suppressHydrationWarning here; it would hide the mismatch instead of fixing its cause.

Accepted answerposted by Maya Chen

React hydration fails only when I format a date in production

Actual result

2 answers

Your response

Related Web development posts