diff --git a/.changeset/honest-tables-marry.md b/.changeset/honest-tables-marry.md
new file mode 100644
index 00000000000..5dc6d57df7a
--- /dev/null
+++ b/.changeset/honest-tables-marry.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+make check for semantic as a compile time effect
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index 6c2894400d1..7e01d7a10c9 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -31,14 +31,21 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
       return merge(baseStyles, sxProp as SxProp)
     }, [baseStyles, sxProp])
 
-    React.useEffect(() => {
-      if (!(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
-        if (__DEV__) {
+    if (__DEV__) {
+      /**
+       * The Linter yells because it thinks this conditionally calls an effect,
+       * but since this is a compile-time flag and not a runtime conditional
+       * this is safe, and ensures the entire effect is kept out of prod builds
+       * shaving precious bytes from the output, and avoiding mounting a noop effect
+       */
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useEffect(() => {
+        if (!(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
           // eslint-disable-next-line no-console
           console.warn('This component should be an instanceof a semantic button or anchor')
         }
-      }
-    }, [innerRef])
+      }, [innerRef])
+    }
 
     return (
       <StyledButton as={Component} sx={sxStyles} {...rest} ref={innerRef}>