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