Setting the file. One moment.
Skill 03 · Vercel React Best Practices
Subchapter 3.46
rules/rendering-hydration-suppress-warning.mdMarkdown872 BView on GitHub
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 to prevent noisy warnings. Do not use this to hide real bugs. Don’t overuse it.
suppressHydrationWarningIncorrect (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>
)
}