Files
5chan/.codex/skills/vercel-react-best-practices/rules/rendering-hydration-suppress-warning.md
T
Tommaso CasaburiandGitHub a92b185a66 chore(ai-workflow): track repo-managed review tooling (#1046)
* chore(ai-workflow): track repo-managed review tooling

* fix(ai-workflow): remove repo-specific path assumptions

Make shared workflow hooks and APK testing guidance resolve paths from the repo and contributor environment so the tooling works for all contributors, not just one machine.
2026-03-10 15:49:15 +08:00

872 B
Raw Blame History

title, impact, impactDescription, tags
title impact impactDescription tags
Suppress Expected Hydration Mismatches LOW-MEDIUM avoids noisy hydration warnings for known differences rendering, hydration, ssr, nextjs

Suppress Expected Hydration Mismatches

In SSR frameworks (e.g., Next.js), some values are intentionally different on server vs client (random IDs, dates, locale/timezone formatting). For these expected mismatches, wrap the dynamic text in an element with suppressHydrationWarning to prevent noisy warnings. Do not use this to hide real bugs. Dont overuse it.

Incorrect (known mismatch warnings):

function Timestamp() {
  return <span>{new Date().toLocaleString()}</span>
}

Correct (suppress expected mismatch only):

function Timestamp() {
  return (
    <span suppressHydrationWarning>
      {new Date().toLocaleString()}
    </span>
  )
}