From 4403e220060856d7a04fb9e5b0a9a7ec83e3db39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= Date: Sun, 29 Mar 2026 11:48:01 +0200 Subject: [PATCH] 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) --- apps/journal/app/components/ClientDate.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/apps/journal/app/components/ClientDate.tsx b/apps/journal/app/components/ClientDate.tsx index 0bbc775..af210ae 100644 --- a/apps/journal/app/components/ClientDate.tsx +++ b/apps/journal/app/components/ClientDate.tsx @@ -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 ( + ); - - useEffect(() => { - setFormatted(new Date(iso).toLocaleDateString()); - }, [iso]); - - return ; }