diff --git a/packages/react/src/checkbox/Checkbox.js b/packages/react/src/checkbox/Checkbox.js
index 389bde3039..203203afe1 100644
--- a/packages/react/src/checkbox/Checkbox.js
+++ b/packages/react/src/checkbox/Checkbox.js
@@ -1,4 +1,4 @@
-import { useMergeRefs } from '@tonic-ui/react-hooks';
+import { useEffectOnceWhen, useMergeRefs } from '@tonic-ui/react-hooks';
 import { callAll, dataAttr, isNullish } from '@tonic-ui/utils';
 import { ensureArray } from 'ensure-type';
 import React, { forwardRef, useRef } from 'react';
@@ -41,7 +41,7 @@ const Checkbox = forwardRef((inProps, ref) => {
   const inputRef = useRef();
   const combinedInputRef = useMergeRefs(inputRefProp, inputRef);
   const checkboxGroupContext = useCheckboxGroup();
-  const isNameConflictRef = useRef(false);
+  let warningMessage = '';
 
   if (checkboxGroupContext) {
     const {
@@ -56,18 +56,11 @@ const Checkbox = forwardRef((inProps, ref) => {
       checked = ensureArray(checkboxGroupValue).includes(value);
     }
     disabled = (disabled ?? checkboxGroupDisabled);
-
-    const isNameConflict = (!isNullish(name) && !isNullish(checkboxGroupName) && (name !== checkboxGroupName));
-    if (process.env.NODE_ENV !== 'production' && isNameConflict && !isNameConflictRef.current) {
-      // Log the warning message only once
-      console.error(
-        `Warning: The \`Checkbox\` has a \`name\` prop ("${name}") that conflicts with the \`CheckboxGroup\`'s \`name\` prop ("${checkboxGroupName}")`
-      );
-      isNameConflictRef.current = true;
+    const isNameConflict = !isNullish(name) && !isNullish(checkboxGroupName) && (name !== checkboxGroupName);
+    if (isNameConflict) {
+      warningMessage = `Warning: The \`Checkbox\` has a \`name\` prop ("${name}") that conflicts with the \`CheckboxGroup\`'s \`name\` prop ("${checkboxGroupName}")`;
     }
-
     name = name ?? checkboxGroupName;
-
     onChange = callAll(
       onChange,
       checkboxGroupOnChange,
@@ -81,6 +74,13 @@ const Checkbox = forwardRef((inProps, ref) => {
     variantColor = variantColor ?? defaultVariantColor;
   }
 
+  useEffectOnceWhen(() => {
+    if (process.env.NODE_ENV !== 'production' && !!warningMessage) {
+      // Log the warning message only once
+      console.error(warningMessage);
+    }
+  }, [!!warningMessage]);
+
   const styleProps = useCheckboxStyle({ disabled });
 
   return (
diff --git a/packages/react/src/radio/Radio.js b/packages/react/src/radio/Radio.js
index 4c553b4b71..e4ac8297b6 100644
--- a/packages/react/src/radio/Radio.js
+++ b/packages/react/src/radio/Radio.js
@@ -1,4 +1,4 @@
-import { useMergeRefs } from '@tonic-ui/react-hooks';
+import { useEffectOnceWhen, useMergeRefs } from '@tonic-ui/react-hooks';
 import { callAll, isNullish } from '@tonic-ui/utils';
 import React, { forwardRef, useRef } from 'react';
 import { Box } from '../box';
@@ -39,7 +39,7 @@ const Radio = forwardRef((inProps, ref) => {
   const inputRef = useRef();
   const combinedInputRef = useMergeRefs(inputRefProp, inputRef);
   const radioGroupContext = useRadioGroup();
-  const isNameConflictRef = useRef(false);
+  let warningMessage = '';
 
   if (radioGroupContext) {
     const {
@@ -55,17 +55,11 @@ const Radio = forwardRef((inProps, ref) => {
       checked = (radioGroupValue === value);
     }
     disabled = (disabled ?? radioGroupDisabled);
-
-    const isNameConflict = (!isNullish(name) && !isNullish(radioGroupName) && (name !== radioGroupName));
-    if (process.env.NODE_ENV !== 'production' && isNameConflict && !isNameConflictRef.current) {
-      // Log the warning message only once
-      console.error(
-        `Warning: The \`Radio\` has a \`name\` prop ("${name}") that conflicts with the \`RadioGroup\`'s \`name\` prop ("${radioGroupName}")`
-      );
-      isNameConflictRef.current = true;
+    const isNameConflict = !isNullish(name) && !isNullish(radioGroupName) && (name !== radioGroupName);
+    if (isNameConflict) {
+      warningMessage = `Warning: The \`Radio\` has a \`name\` prop ("${name}") that conflicts with the \`RadioGroup\`'s \`name\` prop ("${radioGroupName}")`;
     }
     name = (name ?? radioGroupName);
-
     onChange = callAll(
       onChange,
       radioGroupOnChange,
@@ -79,6 +73,13 @@ const Radio = forwardRef((inProps, ref) => {
     variantColor = variantColor ?? defaultVariantColor;
   }
 
+  useEffectOnceWhen(() => {
+    if (process.env.NODE_ENV !== 'production' && !!warningMessage) {
+      // Log the warning message only once
+      console.error(warningMessage);
+    }
+  }, [!!warningMessage]);
+
   const styleProps = useRadioStyle({ disabled });
 
   return (