Fix className hydration warning for custom elements

facebook · Mar 30, 2023 · d4e2063 · d4e2063
1 parent 3499590
commit d4e2063
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/packages/react-dom-bindings/src/client/DOMPropertyOperations.js b/packages/react-dom-bindings/src/client/DOMPropertyOperations.js
@@ -253,10 +253,6 @@ export function getValueForAttributeOnCustomComponent(
       }
       return expected === undefined ? undefined : null;
     }
-    if (enableCustomElementPropertySupport && name === 'className') {
-      // className is a special cased property on the server to render as an attribute.
-      name = 'class';
-    }
     const value = node.getAttribute(name);
 
     if (enableCustomElementPropertySupport) {

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -1064,6 +1064,21 @@ function diffHydratedCustomComponent(
           continue;
         }
       // eslint-disable-next-line no-fallthrough
+      case 'className':
+        if (enableCustomElementPropertySupport) {
+          // className is a special cased property on the server to render as an attribute.
+          extraAttributeNames.delete('class');
+          const serverValue = getValueForAttributeOnCustomComponent(
+            domElement,
+            'class',
+            nextProp,
+          );
+          if (nextProp !== serverValue) {
+            warnForPropDifference('className', serverValue, nextProp);
+          }
+          continue;
+        }
+      // eslint-disable-next-line no-fallthrough
       default: {
         let ownNamespaceDev = parentNamespaceDev;
         if (ownNamespaceDev === HTML_NAMESPACE) {

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -34,7 +34,7 @@ function initModules() {
   };
 }
 
-const {resetModules, itRenders, clientCleanRender, clientRenderOnServerString} =
+const {resetModules, itRenders, clientCleanRender} =
   ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegration', () => {
@@ -662,16 +662,13 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('className for custom elements', async render => {
+      const e = await render(<custom-element className="test" />, 0);
       if (ReactFeatureFlags.enableCustomElementPropertySupport) {
-        const e = await render(
-          <custom-element className="test" />,
-          render === clientRenderOnServerString ? 1 : 0,
-        );
         expect(e.getAttribute('className')).toBe(null);
         expect(e.getAttribute('class')).toBe('test');
       } else {
-        const e = await render(<custom-element className="test" />, 0);
         expect(e.getAttribute('className')).toBe('test');
+        expect(e.getAttribute('class')).toBe(null);
       }
     });