Hydration Proof

Search documentation

Find a page or section

HP6003: suppressHydrationWarning with nothing to suppress

HP6003 (suppression-unused) means an element has suppressHydrationWarning but its server and client output are identical. Remove it before it hides a bug.

HP6003 (suppression-unused) means an element is marked with suppressHydrationWarning, but its server and client output are identical: there is nothing to suppress. The attribute only hides future mistakes on that element. Remove it, so real mismatches are reported later. It is reported only with checks.suppressedWarnings: 'strict'.

CodeHP6003
Namesuppression-unused
Default severityInfo
GroupsuppressHydrationWarning audit
What it meansThe element is marked with suppressHydrationWarning but its server and client output are identical.

What the HP6003 suppression unused finding means

During hydration, hydration-proof compares each marked element's text and attributes with the server HTML. When none of them differs in the tested scenario, it reports:

suppressHydrationWarning is set, but the server and client output are identical.

The finding is info and off by default. Turn it on to clean up old suppressions:

hydration-proof.config.ts
import { defineConfig } from "hydration-proof";
 
export default defineConfig({
  checks: { suppressedWarnings: "strict" },
});

A difference can depend on the environment. An element that matches in the default scenario may differ in another timezone or theme, so check the finding across your scenarios before you remove the attribute.

Likely causes

  • The value that used to differ was fixed, and the attribute stayed.
  • The attribute was copied along with a component.
  • A design system passes suppressHydrationWarning to elements that never need it.

How to fix it

Remove suppressHydrationWarning if nothing on this element differs, so real mismatches are not hidden later.

components/page-title.tsx
// Before: static text, nothing can differ
export function PageTitle() {
  return <h1 suppressHydrationWarning>Dashboard</h1>;
}
components/page-title.tsx
export function PageTitle() {
  return <h1>Dashboard</h1>;
}

Keep it where the difference only shows up in some environments, such as <html> with a theme script in a dark mode scenario, and ignore the finding for that element (see ignoring findings).

Catch it with ESLint

audit-suppress-hydration-warning reports the attribute on elements whose attributes and text are all static (unused), and its suggestion removes it.