Companion demo for the Preventing flash before hydration guide.
Built with LANG=ja_JP.UTF-8 to simulate a server/client locale mismatch. Use Chrome DevTools Sensors to test with different client locales.
/inline-script- Date formatting with an inline script. No flash, no hydration error./hydration-error- A Client Component callingtoLocaleDateString()directly. Hydration error in dev, flash in prod./accordion- Persisted accordion state usinglocalStorage, a lazyuseStateinitializer, and an inline script.
InlineScripthelper (app/components/inline-script.tsx) - Setstype="text/javascript"on the server andtype="text/plain"on the client to avoid React's script warning.LocalDatecomponent (app/components/local-date.tsx) - Client Component withuseId,suppressHydrationWarning, andInlineScript.Accordioncomponent (app/accordion/accordion.tsx) - LazyuseStateinitializer readslocalStorageto match the DOM the inline script set.
pnpm install
pnpm devThe dev script sets LANG=ja_JP.UTF-8 automatically. If your browser also uses a Japanese locale, switch to a different one (e.g. LANG=en_US.UTF-8 pnpm dev) to see the mismatch.