Repository: facebook/react
File: packages/react-dom-bindings/src/client/ReactDOMComponent.js (JavaScript)

Code before:
      ) {
        if (__DEV__) {
          checkAttributeStringCoercion(value, key);
        }
        domElement.setAttribute(
          key,
          enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
        );
      } else {
        domElement.removeAttribute(key);
      }
      break;
    }
    // Boolean
    case 'allowFullScreen':
    case 'async':
    case 'autoPlay':
    case 'controls':
    case 'default':
    case 'defer':
    case 'disabled':
    case 'disablePictureInPicture':
    case 'disableRemotePlayback':
    case 'formNoValidate':
    case 'hidden':
    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
    case 'loop':
    case 'noModule':
    case 'noValidate':
    case 'open':
    case 'playsInline':
    case 'readOnly':
    case 'required':
    case 'reversed':
    case 'scoped':
    case 'seamless':
    case 'itemScope': {
      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
        domElement.setAttribute(key, '');
      } else {
        domElement.removeAttribute(key);
      }
      break;
    }
    // Overloaded Boolean
    case 'capture':
    case 'download': {
      // An attribute that can be used as a flag as well as with a value.
      // When true, it should be present (set either to an empty string or its name).
      // When false, it should be omitted.
      // For any other value, should be present with that value.

Review comment (refactor):
This is quite hacky but allows for a minimal diff as far as I can tell. We want the case to be just `case 'inert'` when `enableNewBooleanProps` is enabled and ideally the case to disappear without `enableNewBooleanProps` which we get indirectly by reusing a value we already covered earlier. I didn't choose `hidden` because that might move in the future when we add `hidden="until-found"`.

It's quite lazy so open to refactoring this if you feel uncomfortable shipping it like this. The alternatives I explored look quite verbose and doesn't DCE quite as well.

Code after:
    case 'autoReverse':
    case 'externalResourcesRequired':
    case 'focusable':
    case 'preserveAlpha': {
      // Booleanish String
      // These are "enumerated" attributes that accept "true" and "false".
      // In React, we let users pass `true` and `false` even though technically
      // these aren't boolean attributes (they are coerced to strings).
      // The SVG attributes are case-sensitive. Since the HTML attributes are
      // insensitive they also work even though we canonically use lower case.
      if (
        value != null &&
        typeof value !== 'function' &&
        typeof value !== 'symbol'
      ) {
        if (__DEV__) {
          checkAttributeStringCoercion(value, key);
        }
        domElement.setAttribute(
          key,
          enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
        );
      } else {
        domElement.removeAttribute(key);
      }
      break;
    }
    // Boolean
    case 'inert':
      if (!enableNewBooleanProps) {
        setValueForAttribute(domElement, key, value);
        break;
      } else {
        if (__DEV__) {
          if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[key]) {
            didWarnForNewBooleanPropsWithEmptyValue[key] = true;
            console.error(
              'Received an empty string for a boolean attribute `%s`. ' +
                'This will treat the attribute as if it were false. ' +
                'Either pass `false` to silence this warning, or ' +
                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
              key,
            );
          }
        }
      }
    // fallthrough for new boolean props without the flag on
    case 'allowFullScreen':
    case 'async':
    case 'autoPlay':
    case 'controls':