diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 14dbe62d3996..770740e59102 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -548,4 +548,57 @@ describe('ReactDOMServerHydration', () => {
expect(ref.current).toBe(div);
expect(element.innerHTML).toBe('
server'}} />,
+ );
+ domElement.innerHTML = markup;
+
+ expect(() => {
+ ReactDOM.hydrate(
+
,
+ domElement,
+ );
+
+ expect(domElement.innerHTML).not.toEqual(markup);
+ }).toErrorDev(
+ 'Warning: Text content did not match. Server: "server" Client: "client"',
+ );
+ });
+
+ it('should warn if innerHTML mismatches with dangerouslySetInnerHTML=undefined on the client', () => {
+ const domElement = document.createElement('div');
+ const markup = ReactDOMServer.renderToStaticMarkup(
+
server'}} />,
+ );
+ domElement.innerHTML = markup;
+
+ expect(() => {
+ ReactDOM.hydrate(
, domElement);
+
+ expect(domElement.innerHTML).not.toEqual(markup);
+ }).toErrorDev(
+ 'Warning: Did not expect server HTML to contain a
in
',
+ );
+ });
});
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 539d53b781c9..808f90153690 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1110,12 +1110,11 @@ export function diffHydratedProperties(
} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
const serverHTML = domElement.innerHTML;
const nextHtml = nextProp ? nextProp[HTML] : undefined;
- const expectedHTML = normalizeHTML(
- domElement,
- nextHtml != null ? nextHtml : '',
- );
- if (expectedHTML !== serverHTML) {
- warnForPropDifference(propKey, serverHTML, expectedHTML);
+ if (nextHtml != null) {
+ const expectedHTML = normalizeHTML(domElement, nextHtml);
+ if (expectedHTML !== serverHTML) {
+ warnForPropDifference(propKey, serverHTML, expectedHTML);
+ }
}
} else if (propKey === STYLE) {
// $FlowFixMe - Should be inferred as not undefined.