[react-dom] Normalize attribute whitespace during hydration comparison#35979
Closed
Felipeness wants to merge 1 commit intofacebook:mainfrom
Closed
[react-dom] Normalize attribute whitespace during hydration comparison#35979Felipeness wants to merge 1 commit intofacebook:mainfrom
Felipeness wants to merge 1 commit intofacebook:mainfrom
Conversation
Browsers normalize tab, newline, and carriage return characters to spaces when parsing HTML attribute values. Previously, React's hydration comparison used strict equality which could produce false mismatch warnings when the server and client attribute values differ only by this whitespace normalization. This change adds a fallback comparison in hydrateAttribute() and warnForPropDifference() that normalizes \t, \n, and \r to spaces before comparing, matching browser behavior per the HTML spec. Fixes facebook#35481
Author
|
Closing this PR after internal review. The premise that browsers normalize The actual root cause is in the compiler's codegen layer (Babel serialization artifact), which is addressed in #35978. With that fix in place, server and client attribute values are identical, making this hydration-side normalization unnecessary. Additionally, this PR had issues:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Related to #35481 — companion to #35978
Browsers normalize tab (
\t), newline (\n), and carriage return (\r) characters to spaces when parsing HTML attribute values (HTML spec). React's hydration attribute comparison uses strict string equality, which can produce false mismatch warnings when server and client attribute values differ only by this whitespace normalization.This change adds a fallback comparison in the hydration path that normalizes
\t,\n, and\rto spaces before comparing, matching browser behavior.What changed
In
ReactDOMComponent.js:NORMALIZE_ATTRIBUTE_WHITESPACE_REGEXandnormalizeAttributeValueForComparison()helperhydrateAttribute(): after strict equality fails, performs a normalized comparison before reporting a mismatchwarnForPropDifference(): adds whitespace normalization as an additional comparison stepContext
\t\n\r↔ space differences from any sourceRelationship to #35978
Either fix independently resolves the reported issue. Together they provide defense in depth.
How did you test this change?
Added 3 test cases to
ReactDOMHydrationDiff-test.js:does not warn when attribute values differ only by whitespace normalizationclassNamewith\nvs spacedoes not warn for tab and carriage return normalizationclassNamewith\tand\r\nvs spacesdoes not warn for title attribute whitespace normalizationtitlewith\nvs space