Remove useEffect flicker from ClientDate

Now that both server and client use the same locale from context,
the post-hydration useEffect that re-formatted with the browser's
OS locale was causing a visible flicker. Just render with the
context locale directly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-03-29 11:48:01 +02:00
parent 38ada3bd4f
commit 4403e22006
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9

View file

@ -1,20 +1,12 @@
import { useState, useEffect } from "react";
import { useLocale } from "./LocaleContext";
/**
* Renders a date using the server-detected locale for the initial render
* (matching SSR output), then updates to the browser's native locale
* after hydration.
* Renders a date formatted with the server-detected locale,
* ensuring SSR and client output match (no hydration flicker).
*/
export function ClientDate({ iso }: { iso: string }) {
const locale = useLocale();
const [formatted, setFormatted] = useState(
new Date(iso).toLocaleDateString(locale),
return (
<time dateTime={iso}>{new Date(iso).toLocaleDateString(locale)}</time>
);
useEffect(() => {
setFormatted(new Date(iso).toLocaleDateString());
}, [iso]);
return <time dateTime={iso}>{formatted}</time>;
}