Reemus Icon

How to Ignore React Hydration Errors


To ignore any server-side rendering (SSR) hydration error in React, use the suppressHydrationWarning prop on any element:

function Page() {
  return (
    <html suppressHydrationWarning>
      <head />
      <body />

The suppressHydrationWarning prop will prevent any errors relating from a mismatch between server and client HTML. This only applies for the specific element for which the prop is set on.

Why hydration errors happen

Hydration errors happen when the HTML rendered on the server does not match the HTML rendered on the client. This can happen for a number of reasons, some of which are entirely valid.

When to ignore hydration errors

Some hydration errors are unavoidable and should be ignored. For example errors from browser extensions or inline JS. Such hydration errors should be ignored and the suppressHydrationWarning prop is the perfect solution for this

Browser extensions

Some browser extensions add elements or attributes to the DOM

"React hydration error from browser extension"

DOM modifying JS in the document head

A good example of this is toggling color-schemes by adding a class to the <body> tag using an inline <script> tag inside <head> element

"React hydration error from classNames"

Drawbacks of ignoring hydration errors

Ignoring hydration errors can be dangerous. It can hide bugs in your code and cause unexpected behavior. Generally speaking, you want your server HTML and initial client HTML to match up.

Thankfully the suppressHydrationWarning only acts on the specific element it's applied on. Hence the scope of the error suppression is limited





Your name will be displayed publicly

Loading comments...