HP6001 suppressed mismatch: what it means

HP6001 (suppressed-mismatch) means the server and client values differ on an element marked with suppressHydrationWarning. React does not report the difference and keeps the server value. That is fine for intentional differences such as timestamps or a theme class; check that this one is, and keep the attribute on the smallest element possible.

Code	HP6001
Name	suppressed-mismatch
Default severity	Info
Group	suppressHydrationWarning audit
What it means	The server and client values differ on an element marked with suppressHydrationWarning. React keeps the server value.

What the HP6001 suppressed mismatch finding means

suppressHydrationWarning silences React for one element's own text and attributes. hydration-proof still compares them, and lists every difference it hides, so you know what you are suppressing:

Server rendered "10:04:31", the client rendered "10:04:33" (suppressHydrationWarning).

It finds them in three places:

the text and attributes React renders for the marked element, compared with the server HTML;
text that React 18 replaced during hydration on a marked element;
changes a script made to a marked element before hydration, such as a theme script that sets a class on <html> (this would otherwise be HP4001).

The cause is always intentional difference.

When HP6001 is a warning

The finding is info when the hidden difference looks intentional: the time, a timezone, a locale, a random value, the theme or a browser extension. When it looks like something else, such as browser storage, a browser-only API or different data, it is raised to a warning with this note:

suppressHydrationWarning hides a difference that does not look intentional (localStorage / sessionStorage read during render).

That usually means the attribute was added to make an error go away, and users see the wrong server value until the next render.

Likely causes

A timestamp or relative time rendered on both sides, the classic use of the attribute (see time).
A theme script that sets a class or data-theme on <html> before React hydrates (see theme).
A value read from storage or window and hidden instead of fixed.

How to fix it

This is fine if the difference is intentional (timestamps, for example). Keep suppressHydrationWarning on the smallest element possible.

The two patterns it exists for:

app/layout.tsx

// A theme script changes the class on <html> before hydration
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>{children}</body>
    </html>
  );
}

components/updated-at.tsx

// The time on the element itself, not on a wrapper
export function UpdatedAt({ iso }: { iso: string }) {
  return (
    <time dateTime={iso} suppressHydrationWarning>
      {new Date(iso).toLocaleTimeString()}
    </time>
  );
}

When the finding is a warning, fix the cause instead: read storage and browser APIs in an effect, or send the server's data to the client. Then remove the attribute.

Configure the audit

checks.suppressedWarnings controls the whole HP6xxx group:

Value	Effect
`'info'` (default)	Lists hidden differences as HP6001
`'strict'`	Also reports suppression with nothing to suppress (HP6003)
`'off'`	Drops HP6xxx findings from the report

Info findings do not fail the run and are not printed in the terminal list; the HTML and JSON reports show them. To silence a single one, see ignoring findings.

Catch it with ESLint

audit-suppress-hydration-warning reports the attribute where it has no effect or covers more than one element's text, and with reportAll: true every use.

HP6001: Mismatch hidden by suppressHydrationWarning