Don't "fix up" mismatched text content with suppressedHydrationWarning (#26391)

In concurrent mode we error if child nodes mismatches which triggers a
recreation of the whole hydration boundary. This ensures that we don't
replay the wrong thing, transform state or other security issues.
For text content, we respect `suppressedHydrationWarning` to allow for
things like `<div suppressedHydrationWarning>{timestamp}</div>` to
ignore the timestamp. This mode actually still patches up the text
content to be the client rendered content.
In principle we shouldn't have to do that because either value should be
ok, and arguably it's better not to trigger layout thrash after the
fact.
We do have a lot of code still to deal with patching up the tree because
that's what legacy mode does which is still in the code base. When we
delete legacy mode we would still be stuck with a lot of it just to deal
with this case.
Therefore I propose that we change the semantics to not patch up
hydration errors for text nodes. We already don't for attributes.

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -893,11 +893,9 @@ export function diffHydratedProperties(
 shouldWarnDev: boolean,
 parentNamespaceDev: string,
 ): null|Array<mixed>{
-letisCustomComponentTag;
 letextraAttributeNames: Set<string>;
 
 if(__DEV__){
- isCustomComponentTag =isCustomComponent(tag,rawProps);
 validatePropertiesInDevelopment(tag,rawProps);
 }
 
@@ -963,6 +961,10 @@ export function diffHydratedProperties(
 break;
 }
 
+if(rawProps.hasOwnProperty('onScroll')){
+listenToNonDelegatedEvent('scroll', domElement);
+}
+
 assertValidProps(tag,rawProps);
 
 if(__DEV__){
@@ -988,207 +990,196 @@ export function diffHydratedProperties(
 }
 
 letupdatePayload=null;
-for(constpropKeyinrawProps){
-if(!rawProps.hasOwnProperty(propKey)){
-continue;
-}
-constnextProp=rawProps[propKey];
-if(propKey===CHILDREN){
-// For text content children we compare against textContent. This
-// might match additional HTML that is hidden when we read it using
-// textContent. E.g. "foo" will match "f<span>oo</span>" but that still
-// satisfies our requirement. Our requirement is not to produce perfect
-// HTML and attributes. Ideally we should preserve structure but it's
-// ok not to if the visible content is still enough to indicate what
-// even listeners these nodes might be wired up to.
-// TODO: Warn if there is more than a single textNode as a child.
-// TODO: Should we use domElement.firstChild.nodeValue to compare?
-if(typeofnextProp==='string'){
-if(domElement.textContent!==nextProp){
-if(rawProps[SUPPRESS_HYDRATION_WARNING]!==true){
-checkForUnmatchedText(
-domElement.textContent,
-nextProp,
-isConcurrentMode,
-shouldWarnDev,
-);
-}
-updatePayload=[CHILDREN,nextProp];
-}
-}elseif(typeofnextProp==='number'){
-if(domElement.textContent!==''+nextProp){
-if(rawProps[SUPPRESS_HYDRATION_WARNING]!==true){
-checkForUnmatchedText(
-domElement.textContent,
-nextProp,
-isConcurrentMode,
-shouldWarnDev,
-);
-}
-updatePayload=[CHILDREN,''+nextProp];
-}
+
+constchildren=rawProps.children;
+// For text content children we compare against textContent. This
+// might match additional HTML that is hidden when we read it using
+// textContent. E.g. "foo" will match "f<span>oo</span>" but that still
+// satisfies our requirement. Our requirement is not to produce perfect
+// HTML and attributes. Ideally we should preserve structure but it's
+// ok not to if the visible content is still enough to indicate what
+// even listeners these nodes might be wired up to.
+// TODO: Warn if there is more than a single textNode as a child.
+// TODO: Should we use domElement.firstChild.nodeValue to compare?
+if(typeofchildren==='string'||typeofchildren==='number'){
+if(domElement.textContent!==''+children){
+if(rawProps[SUPPRESS_HYDRATION_WARNING]!==true){
+checkForUnmatchedText(
+domElement.textContent,
+children,
+isConcurrentMode,
+shouldWarnDev,
+);
 }
-}elseif(registrationNameDependencies.hasOwnProperty(propKey)){
-if(nextProp!=null){
-if(__DEV__&&typeofnextProp!=='function'){
-warnForInvalidEventListener(propKey,nextProp);
-}
-if(propKey==='onScroll'){
-listenToNonDelegatedEvent('scroll',domElement);
-}
+if(!isConcurrentMode){
+updatePayload=[CHILDREN,children];
 }
-}elseif(
-shouldWarnDev&&
-__DEV__&&
-// Convince Flow we've calculated it (it's DEV-only in this method.)
-typeofisCustomComponentTag==='boolean'
-){
-// Validate that the properties correspond to their expected values.
-letserverValue;
-constpropertyInfo=
-isCustomComponentTag&&enableCustomElementPropertySupport
- ? null
- : getPropertyInfo(propKey);
-if(rawProps[SUPPRESS_HYDRATION_WARNING]===true){
-// Don't bother comparing. We're ignoring all these warnings.
-}elseif(
-propKey===SUPPRESS_CONTENT_EDITABLE_WARNING||
-propKey===SUPPRESS_HYDRATION_WARNING||
-// Controlled attributes are not validated
-// TODO: Only ignore them on controlled tags.
-propKey==='value'||
-propKey==='checked'||
-propKey==='selected'
-){
-// Noop
-}elseif(propKey===DANGEROUSLY_SET_INNER_HTML){
-constserverHTML=domElement.innerHTML;
-constnextHtml=nextProp ? nextProp[HTML] : undefined;
-if(nextHtml!=null){
-constexpectedHTML=normalizeHTML(domElement,nextHtml);
-if(expectedHTML!==serverHTML){
-warnForPropDifference(propKey,serverHTML,expectedHTML);
+}
+}
+
+if(__DEV__&&shouldWarnDev){
+constisCustomComponentTag=isCustomComponent(tag,rawProps);
+
+for(constpropKeyinrawProps){
+if(!rawProps.hasOwnProperty(propKey)){
+continue;
+}
+constnextProp=rawProps[propKey];
+if(propKey===CHILDREN){
+// Checked above already
+}elseif(registrationNameDependencies.hasOwnProperty(propKey)){
+if(nextProp!=null){
+if(typeofnextProp!=='function'){
+warnForInvalidEventListener(propKey,nextProp);
 }
 }
-}elseif(propKey===STYLE){
-// $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.delete(propKey);
-
-if(canDiffStyleForHydrationWarning){
-constexpectedStyle=createDangerousStringForStyles(nextProp);
-serverValue=domElement.getAttribute('style');
-if(expectedStyle!==serverValue){
-warnForPropDifference(propKey,serverValue,expectedStyle);
+}else{
+// Validate that the properties correspond to their expected values.
+letserverValue;
+constpropertyInfo=
+isCustomComponentTag&&enableCustomElementPropertySupport
+ ? null
+ : getPropertyInfo(propKey);
+if(rawProps[SUPPRESS_HYDRATION_WARNING]===true){
+// Don't bother comparing. We're ignoring all these warnings.
+}elseif(
+propKey===SUPPRESS_CONTENT_EDITABLE_WARNING||
+propKey===SUPPRESS_HYDRATION_WARNING||
+// Controlled attributes are not validated
+// TODO: Only ignore them on controlled tags.
+propKey==='value'||
+propKey==='checked'||
+propKey==='selected'
+){
+// Noop
+}elseif(propKey===DANGEROUSLY_SET_INNER_HTML){
+constserverHTML=domElement.innerHTML;
+constnextHtml=nextProp ? nextProp[HTML] : undefined;
+if(nextHtml!=null){
+constexpectedHTML=normalizeHTML(domElement,nextHtml);
+if(expectedHTML!==serverHTML){
+warnForPropDifference(propKey,serverHTML,expectedHTML);
+}
 }
-}
-}elseif(
-enableCustomElementPropertySupport&&
-isCustomComponentTag&&
-(propKey==='offsetParent'||
-propKey==='offsetTop'||
-propKey==='offsetLeft'||
-propKey==='offsetWidth'||
-propKey==='offsetHeight'||
-propKey==='isContentEditable'||
-propKey==='outerText'||
-propKey==='outerHTML')
-){
-// $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.delete(propKey.toLowerCase());
-if(__DEV__){
-console.error(
-'Assignment to read-only property will result in a no-op: `%s`',
-propKey,
-);
-}
-}elseif(isCustomComponentTag&&!enableCustomElementPropertySupport){
-// $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.delete(propKey.toLowerCase());
-serverValue=getValueForAttribute(
-domElement,
-propKey,
-nextProp,
-isCustomComponentTag,
-);
+}elseif(propKey===STYLE){
+// $FlowFixMe - Should be inferred as not undefined.
+extraAttributeNames.delete(propKey);
 
-if(nextProp!==serverValue){
-warnForPropDifference(propKey,serverValue,nextProp);
-}
-}elseif(
-!shouldIgnoreAttribute(propKey,propertyInfo,isCustomComponentTag)&&
-!shouldRemoveAttribute(
-propKey,
-nextProp,
-propertyInfo,
-isCustomComponentTag,
-)
-){
-letisMismatchDueToBadCasing=false;
-if(propertyInfo!==null){
+if(canDiffStyleForHydrationWarning){
+constexpectedStyle=createDangerousStringForStyles(nextProp);
+serverValue=domElement.getAttribute('style');
+if(expectedStyle!==serverValue){
+warnForPropDifference(propKey,serverValue,expectedStyle);
+}
+}
+}elseif(
+enableCustomElementPropertySupport&&
+isCustomComponentTag&&
+(propKey==='offsetParent'||
+propKey==='offsetTop'||
+propKey==='offsetLeft'||
+propKey==='offsetWidth'||
+propKey==='offsetHeight'||
+propKey==='isContentEditable'||
+propKey==='outerText'||
+propKey==='outerHTML')
+){
+// $FlowFixMe - Should be inferred as not undefined.
+extraAttributeNames.delete(propKey.toLowerCase());
+if(__DEV__){
+console.error(
+'Assignment to read-only property will result in a no-op: `%s`',
+propKey,
+);
+}
+}elseif(
+isCustomComponentTag&&
+!enableCustomElementPropertySupport
+){
 // $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.delete(propertyInfo.attributeName);
-serverValue=getValueForProperty(
+extraAttributeNames.delete(propKey.toLowerCase());
+serverValue=getValueForAttribute(
 domElement,
 propKey,
 nextProp,
-propertyInfo,
+isCustomComponentTag,
 );
-}else{
-letownNamespaceDev=parentNamespaceDev;
-if(ownNamespaceDev===HTML_NAMESPACE){
-ownNamespaceDev=getIntrinsicNamespace(tag);
+
+if(nextProp!==serverValue){
+warnForPropDifference(propKey,serverValue,nextProp);
 }
-if(ownNamespaceDev===HTML_NAMESPACE){
+}elseif(
+!shouldIgnoreAttribute(propKey,propertyInfo,isCustomComponentTag)&&
+!shouldRemoveAttribute(
+propKey,
+nextProp,
+propertyInfo,
+isCustomComponentTag,
+)
+){
+letisMismatchDueToBadCasing=false;
+if(propertyInfo!==null){
 // $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.delete(propKey.toLowerCase());
+extraAttributeNames.delete(propertyInfo.attributeName);
+serverValue=getValueForProperty(
+domElement,
+propKey,
+nextProp,
+propertyInfo,
+);
 }else{
-conststandardName=getPossibleStandardName(propKey);
-if(standardName!==null&&standardName!==propKey){
-// If an SVG prop is supplied with bad casing, it will
-// be successfully parsed from HTML, but will produce a mismatch
-// (and would be incorrectly rendered on the client).
-// However, we already warn about bad casing elsewhere.
-// So we'll skip the misleading extra mismatch warning in this case.
-isMismatchDueToBadCasing=true;
+letownNamespaceDev=parentNamespaceDev;
+if(ownNamespaceDev===HTML_NAMESPACE){
+ownNamespaceDev=getIntrinsicNamespace(tag);
+}
+if(ownNamespaceDev===HTML_NAMESPACE){
+// $FlowFixMe - Should be inferred as not undefined.
+extraAttributeNames.delete(propKey.toLowerCase());
+}else{
+conststandardName=getPossibleStandardName(propKey);
+if(standardName!==null&&standardName!==propKey){
+// If an SVG prop is supplied with bad casing, it will
+// be successfully parsed from HTML, but will produce a mismatch
+// (and would be incorrectly rendered on the client).
+// However, we already warn about bad casing elsewhere.
+// So we'll skip the misleading extra mismatch warning in this case.
+isMismatchDueToBadCasing=true;
+// $FlowFixMe - Should be inferred as not undefined.
+extraAttributeNames.delete(standardName);
+}
 // $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.delete(standardName);
+extraAttributeNames.delete(propKey);
 }
-// $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.delete(propKey);
+serverValue=getValueForAttribute(
+domElement,
+propKey,
+nextProp,
+isCustomComponentTag,
+);
 }
-serverValue=getValueForAttribute(
-domElement,
-propKey,
-nextProp,
-isCustomComponentTag,
-);
-}
 
-constdontWarnCustomElement=
-enableCustomElementPropertySupport&&
-isCustomComponentTag&&
-(typeofnextProp==='function'||typeofnextProp==='object');
-if(
-!dontWarnCustomElement&&
-nextProp!==serverValue&&
-!isMismatchDueToBadCasing
-){
-warnForPropDifference(propKey,serverValue,nextProp);
+constdontWarnCustomElement=
+enableCustomElementPropertySupport&&
+isCustomComponentTag&&
+(typeofnextProp==='function'||typeofnextProp==='object');
+if(
+!dontWarnCustomElement&&
+nextProp!==serverValue&&
+!isMismatchDueToBadCasing
+){
+warnForPropDifference(propKey,serverValue,nextProp);
+}
 }
 }
 }
-}
 
-if(__DEV__){
-if(shouldWarnDev){
-if(
-// $FlowFixMe - Should be inferred as not undefined.
-extraAttributeNames.size>0&&
-rawProps[SUPPRESS_HYDRATION_WARNING]!==true
-){
-// $FlowFixMe - Should be inferred as not undefined.
-warnForExtraAttributes(extraAttributeNames);
-}
+if(
+// $FlowFixMe - Should be inferred as not undefined.
+extraAttributeNames.size>0&&
+rawProps[SUPPRESS_HYDRATION_WARNING]!==true
+){
+// $FlowFixMe - Should be inferred as not undefined.
+warnForExtraAttributes(extraAttributeNames);
 }
 }