Minified React error #423

Minified React error #423 means React switched the whole root to client rendering after hydration failed outside a Suspense boundary. It describes the recovery, not the original cause. Check the error before it or the exception attached to it.

The error

React 18:

Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

React 19:

Minified React error #423; visit https://react.dev/errors/423 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The full messages behind the code:

What it means

React error 423 means React could not limit the failure to a Suspense boundary, so it rendered the root again in the browser. The page may still work, but content can flash and pre-hydration input can be lost.

Look for the preceding error:

• React 18 logs #423 after every mismatch outside a boundary, right after #418 (an element differs) or #425 (text differs).
• React 19 logs a mismatch as #418 alone. It logs #423 when a component threw an exception during hydration; the exception is attached as the error's cause.

Inside a boundary, React can recover by rendering only that boundary. See there was an error while hydrating.

Minified React error #423 (Next.js)

In the Next.js App Router, a failure outside any Suspense boundary can affect the whole document. A route segment with loading.tsx has a boundary that may contain the failure. In the Pages Router, the root is #__next.

In production, look in the browser console or your error tracking for the original error.

How to fix it

1. Find the first error. Decode #418 or #425 if either appears before #423.

2. Fix its cause. If #423 appears alone, inspect the attached cause or reproduce the page in development.

3. Use Suspense boundaries where appropriate to contain future failures. In the Next.js App Router, a loading.tsx does it for a route segment:

   export default function Loading() {
     return <p>Loading dashboard…</p>;
   }

   Copy

Find every instance

hydration-proof reports a root that switched to client rendering as HP2004 and a discarded page as HP1011. It also reports the mismatch that started the failure when it can locate it:

npx hydration-proof test --mode both

The ESLint rules can catch common sources of the first mismatch before the page runs.

Related

• Minified React error #418
• There was an error while hydrating: the full message
• Every minified React hydration code
• Hydration errors in Next.js
• HP2004: the root switched to client rendering