Less hacky, more verbose, more runtime impact

Author: Sebastian Silbermann

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

@@ -716,7 +716,7 @@ function setProp(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
+    case 'inert':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -728,14 +728,18 @@ function setProp(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-        domElement.setAttribute(key, '');
-      } else {
-        domElement.removeAttribute(key);
+      const isNewBooleanProp = key === 'inert';
+      if (enableNewBooleanProps || !isNewBooleanProp) {
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          domElement.setAttribute(key, '');
+        } else {
+          domElement.removeAttribute(key);
+        }
+        break;
       }
-      break;
     }
     // Overloaded Boolean
+    // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
     case 'capture':
     case 'download': {
       // An attribute that can be used as a flag as well as with a value.
@@ -2495,7 +2499,7 @@ function diffHydratedGenericElement(
       case 'disableRemotePlayback':
       case 'formNoValidate':
       case 'hidden':
-      case enableNewBooleanProps ? 'inert' : 'formNoValidate':
+      case 'inert':
       case 'loop':
       case 'noModule':
       case 'noValidate':
@@ -2507,16 +2511,20 @@ function diffHydratedGenericElement(
       case 'scoped':
       case 'seamless':
       case 'itemScope': {
-        // Some of these need to be lower case to remove them from the extraAttributes list.
-        hydrateBooleanAttribute(
-          domElement,
-          propKey,
-          propKey.toLowerCase(),
-          value,
-          extraAttributes,
-        );
-        continue;
+        const isNewBooleanProp = propKey === 'inert';
+        if (enableNewBooleanProps || !isNewBooleanProp) {
+          // Some of these need to be lower case to remove them from the extraAttributes list.
+          hydrateBooleanAttribute(
+            domElement,
+            propKey,
+            propKey.toLowerCase(),
+            value,
+            extraAttributes,
+          );
+          continue;
+        }
       }
+      // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
       case 'capture':
       case 'download': {
         hydrateOverloadedBooleanAttribute(

packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js

@@ -1290,7 +1290,7 @@ function pushAttribute(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
+    case 'inert':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -1302,16 +1302,20 @@ function pushAttribute(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      // Boolean
-      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-        target.push(
-          attributeSeparator,
-          stringToChunk(name),
-          attributeEmptyString,
-        );
+      const isNewBooleanProp = name === 'inert';
+      if (enableNewBooleanProps || !isNewBooleanProp) {
+        // Boolean
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          target.push(
+            attributeSeparator,
+            stringToChunk(name),
+            attributeEmptyString,
+          );
+        }
+        return;
       }
-      return;
     }
+    // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
     case 'capture':
     case 'download': {
       // Overloaded Boolean

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js

@@ -224,7 +224,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disableRemotePlayback':
           case 'formNoValidate':
           case 'hidden':
-          case enableNewBooleanProps ? 'inert' : 'formNoValidate':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -242,6 +241,10 @@ function validateProperty(tagName, name, value, eventRegistry) {
             return true;
           }
           default: {
+            // TODO: Move into above cases once enableNewBooleanProps is removed.
+            if (enableNewBooleanProps && name === 'inert') {
+              return true;
+            }
             const prefix = name.toLowerCase().slice(0, 5);
             if (prefix === 'data-' || prefix === 'aria-') {
               return true;
@@ -302,7 +305,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'disableRemotePlayback':
             case 'formNoValidate':
             case 'hidden':
-            case enableNewBooleanProps ? 'inert' : 'formNoValidate':
             case 'loop':
             case 'noModule':
             case 'noValidate':
@@ -316,6 +318,11 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'itemScope': {
               break;
             }
+            case 'inert':
+              if (enableNewBooleanProps) {
+                break;
+              }
+            // eslint-disable-next-line no-fallthrough -- not flagged after DCE
             default: {
               return true;
             }