From b26b7e4eea4834cc3dee519d8e67e81a4727911f Mon Sep 17 00:00:00 2001
From: Juanra GM <juanrgm724@gmail.com>
Date: Fri, 2 Sep 2022 21:32:12 +0200
Subject: [PATCH] fix(material): move the ref check

---
 .changeset/brown-balloons-warn.md             |  5 ++++
 .../material/src/ButtonBase/ButtonBase.tsx    | 27 +++++++++----------
 2 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/brown-balloons-warn.md

diff --git a/.changeset/brown-balloons-warn.md b/.changeset/brown-balloons-warn.md
new file mode 100644
index 000000000..5113beb5c
--- /dev/null
+++ b/.changeset/brown-balloons-warn.md
@@ -0,0 +1,5 @@
+---
+"@suid/material": patch
+---
+
+Fix console error in `ButtonBase`
diff --git a/packages/material/src/ButtonBase/ButtonBase.tsx b/packages/material/src/ButtonBase/ButtonBase.tsx
index 1ff893eed..e327f1c88 100644
--- a/packages/material/src/ButtonBase/ButtonBase.tsx
+++ b/packages/material/src/ButtonBase/ButtonBase.tsx
@@ -337,19 +337,6 @@ const ButtonBase = $.component(function ButtonBase({
   const enableTouchRipple = () =>
     mountedState() && !props.disableRipple && !props.disabled;
 
-  if (process.env.NODE_ENV !== "production") {
-    createEffect(() => {
-      if (enableTouchRipple() && !ripple.ref) {
-        console.error(
-          [
-            "MUI: The `component` prop provided to ButtonBase is invalid.",
-            "Please make sure the children prop is rendered in this custom component.",
-          ].join("\n")
-        );
-      }
-    });
-  }
-
   return (
     <ButtonBaseRoot
       {...buttonProps()}
@@ -377,7 +364,19 @@ const ButtonBase = $.component(function ButtonBase({
       {props.children}
       <Show when={enableTouchRipple()}>
         <TouchRipple
-          ref={ripple}
+          ref={(ref) => {
+            ripple(ref);
+            if (process.env.NODE_ENV !== "production") {
+              if (!ref) {
+                console.error(
+                  [
+                    "MUI: The `component` prop provided to ButtonBase is invalid.",
+                    "Please make sure the children prop is rendered in this custom component.",
+                  ].join("\n")
+                );
+              }
+            }
+          }}
           center={props.centerRipple}
           {...(props.TouchRippleProps || {})}
         />