react Bug: A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.

Hi,

Original issue: https://github.com/mantinedev/mantine/issues/8319 (the author of this package and Next.js developers indicated that it is related to React)

I have this error which happens very randomly (on refresh or navigation, 1 time out of 5):

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:

A server/client branch if (typeof window !== 'undefined').
Variable input such as Date.now() or Math.random() which changes each time it's called.
Date formatting in a user's locale which doesn't match the server.
External changing data without sending a snapshot of it along with the HTML.
Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

                        `<@mantine/core/Paper component="header" bg="dark" radius={0} p={{base:12,sm:24,md:32}} ...>
                          <@mantine/core/Box ref={null} mod={[...]} className="!flex flex..." style={{...}} ...>
                            <InlineStyles selector=".__m__-_R_..." styles={{padding:"c..."}} media={[...]}>
                              <style
                                data-mantine-styles="inline"
                                nonce={undefined}
                                dangerouslySetInnerHTML={{

                                __html: ".__m__-_R_albn5ritvlb_{padding:calc(0.75rem * var(--mantine-scale));}@m..."

                                __html: ".__m__-_R_1apbn5ritvlb_{padding:calc(0.75rem * var(--mantine-scale));}@..."
                              }}
                            >
                          <header
                            ref={null}
                            style={{--paper-radius:"0rem",background:"var(--mant..."}}

                            className="!flex flex-wrap justify-between gap-4 m_1b7284a3 mantine-Paper-root __m__..."

                            className="!flex flex-wrap justify-between gap-4 m_1b7284a3 mantine-Paper-root __m__..."
                            data-variant={undefined}
                            data-size={undefined}
                            size={undefined}
                          >`

YES, I already read this article: https://help.mantine.dev/q/color-scheme-hydration-warning YES, I already applied <html lang="en" {...mantineHtmlProps}>

React version: 19.2.0

Steps To Reproduce in your environment

Use Mantine's library (maybe other UI libraries has the same problem, no idea)
Use "Box" and "Paper" components (you can try other ones too)
Navigate between pages and you will get randomly this error

Link to reproduce the problem: https://www.ndnci.com/tools/

Steps To Reproduce in the demo

Go to "Tools" listing page
Click on any tool, then in the breadcrumbs, click back on "Tools" and repeat the same thing on several tools, I don't know how many click we need to get this but when it happens it is very anoying because the UI is completely broken, we have to reload the page

The current behavior

Hydratation issue brokes the UI during navigation randomly

The expected behavior

Hydratation issue must be fixed and never break the UI

Nov 25 '25 16:11 sovetski

I saw this error too. I disabled my Chrome extensions, and the problem disappeared.

Dec 08 '25 08:12 Anamika770

Facing this same exact issue.

Current versions i'm using: Next.js: v16.0.7 React: v19.2.1

Dec 11 '25 17:12 Danish-Ayub