Bug: same inline styles are considered different by hydration

[mariusrak]

Hi, I got this error in my console:

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.

https://react.dev/link/hydration-mismatch

  ...
                  <Banner>
                    <BannerComponent__BannerWrapper style={{...}}>
                      <div
                        style={{
+                         --banner-color: "#CDECDE"
-                         --banner-color: "#CDECDE"
+                         --text-color: "#686ae5"
-                         --text-color: "#686ae5"
+                         --btn-color: "#CDFFAA"
-                         --btn-color: "#CDFFAA"
+                         --btn-text-color: "#ff0000"
-                         --btn-text-color: "#ff0000"
                        }}
                        className="BannerComponent__BannerWrapper-sc-1o07lih-0 ctOXQs"
                      >
                  ...
                ...

The weird thing is that the parts of code that are supposed to be different are actually completely equal. I checked in notepad++ with hidden chars displayed and even line endings are same, all the chars are same. So i guess there's nothing to throw error about. How can this even happen?

Also, shouldn't react hydration algorithm cut some slack for such stuff as inline styles? I browsers can have differences in implementations of attributes if they are calculated dynamically, so it can happen that there would be some differences in spaces or capital vs. lowercase hex codes. These are stuff that shouldn't matter and are in fact same. I think it is not possible to achieve 100% identity of react's output on backend and every browser's implementation of values.

[developerjhp]

Thanks for raising this — this is a subtle but important aspect of hydration in React.

To clarify, even though the inline style values look identical, hydration mismatches can still occur because:

• The client string is serialized via createDangerousStringForStyles (ordered, quoted, formatted), [#1, #2]
• The server-rendered style attribute is parsed by the browser, which may reorder properties, strip quotes, or normalize hex colors (#FF00FF → #ff00ff).

So although the values are semantically the same, they may differ byte-for-byte, which React considers a mismatch.

This strict check was intentionally introduced in React 18 to prevent inconsistencies and subtle bugs: https://react.dev/reference/react-dom/hydrate#hydration-mismatches

[pranay-dutta]

I'm having the same kind of hydration error.

'+ className="__variable_5cfdac __variable_9a8899 antialiased" ' - className="__variable_5cfdac __variable_9a8899 antialiased vsc-initialized"

These variables are compiled google fonts.

[mariusrak]

I'm having the same kind of hydration error.

'+ className="__variable_5cfdac __variable_9a8899 antialiased" ' - className="__variable_5cfdac __variable_9a8899 antialiased vsc-initialized"

These variables are compiled google fonts.

No, your problem is different, you clearly have two different strings. This thread is about errors about completely same strings.

[pranay-dutta]

@mariusrak Yes, just realialized. And yeah you have same strings but still getting hydration error. My issue has been fixed by just removing an extension.

Maybe you should try running the application in incognito mode and see if that solves the issue

[mariusrak]

Thanks for raising this — this is a subtle but important aspect of hydration in React.

To clarify, even though the inline style values look identical, hydration mismatches can still occur because:

* The client string is serialized via `createDangerousStringForStyles` (ordered, quoted, formatted), [[#1](https://github.com/facebook/react/blob/37054867c15a7381abe0f73d98f3fecd06da52da/packages/react-dom-bindings/src/client/CSSPropertyOperations.js#L26-L66), [#2](https://github.com/facebook/react/blob/37054867c15a7381abe0f73d98f3fecd06da52da/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L1991-L2023)]

* The server-rendered `style` attribute is parsed by the browser, which may **reorder properties**, **strip quotes**, or **normalize hex colors** (`#FF00FF` → `#ff00ff`).

So although the values are semantically the same, they may differ byte-for-byte, which React considers a mismatch.

This strict check was intentionally introduced in React 18 to prevent inconsistencies and subtle bugs: https://react.dev/reference/react-dom/hydrate#hydration-mismatches

Hi, you can see in my post, that the values are absolutely identical. They are in same order, they use same uppercase/lowercase and quote marks are also same. So they don't differ byte-for-byte, they are byte-for-byte same.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[mariusrak]

Bump Come on, it is obviously something wrong and it shouldn't be problem.