From e171a57d0574f7b8665679e524ccd16f08beeac3 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 6 Aug 2025 16:15:39 -0500
Subject: [PATCH] avoid showing placeholder warning every render

---
 .../autocomplete/src/SearchAutocomplete.tsx         | 10 +++++++---
 packages/@react-spectrum/color/src/ColorField.tsx   | 13 +++++++++----
 packages/@react-spectrum/combobox/src/ComboBox.tsx  | 10 +++++++---
 .../@react-spectrum/searchfield/src/SearchField.tsx | 12 ++++++++----
 packages/@react-spectrum/textfield/src/TextArea.tsx | 12 ++++++++----
 .../@react-spectrum/textfield/src/TextField.tsx     | 12 ++++++++----
 6 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
index ce4e74a00fb..19b4dad828c 100644
--- a/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
+++ b/packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx
@@ -50,9 +50,13 @@ function SearchAutocomplete<T extends object>(props: SpectrumSearchAutocompleteP
   props = useProviderProps(props);
   props = useFormProps(props);
 
-  if (props.placeholder && process.env.NODE_ENV !== 'production') {
-    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
-  }
+  let hasWarned = useRef(false);
+  useEffect(() => {
+    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead.');
+      hasWarned.current = true;
+    }
+  }, [props.placeholder]);
 
   let isMobile = useIsMobileDevice();
   if (isMobile) {
diff --git a/packages/@react-spectrum/color/src/ColorField.tsx b/packages/@react-spectrum/color/src/ColorField.tsx
index db92d864122..9cbdfba2618 100644
--- a/packages/@react-spectrum/color/src/ColorField.tsx
+++ b/packages/@react-spectrum/color/src/ColorField.tsx
@@ -13,7 +13,7 @@
 import {classNames} from '@react-spectrum/utils';
 import {ColorChannel, SpectrumColorFieldProps} from '@react-types/color';
 import {ColorFieldContext, useContextProps} from 'react-aria-components';
-import React, {Ref, useRef} from 'react';
+import React, {Ref, useEffect, useRef} from 'react';
 import styles from './colorfield.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
 import {TextFieldRef} from '@react-types/textfield';
@@ -30,9 +30,14 @@ export const ColorField = React.forwardRef(function ColorField(props: SpectrumCo
   props = useProviderProps(props);
   props = useFormProps(props);
   [props] = useContextProps(props, null, ColorFieldContext);
-  if (props.placeholder && process.env.NODE_ENV !== 'production') {
-    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
-  }
+  
+  let hasWarned = useRef(false);
+  useEffect(() => {
+    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text');
+      hasWarned.current = true;
+    }
+  }, [props.placeholder]);
 
   if (props.channel) {
     return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
diff --git a/packages/@react-spectrum/combobox/src/ComboBox.tsx b/packages/@react-spectrum/combobox/src/ComboBox.tsx
index 16f5255ce83..b39df0ec9b5 100644
--- a/packages/@react-spectrum/combobox/src/ComboBox.tsx
+++ b/packages/@react-spectrum/combobox/src/ComboBox.tsx
@@ -60,9 +60,13 @@ export const ComboBox = React.forwardRef(function ComboBox<T extends object>(pro
   props = useProviderProps(props);
   props = useFormProps(props);
 
-  if (props.placeholder && process.env.NODE_ENV !== 'production') {
-    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
-  }
+  let hasWarned = useRef(false);
+  useEffect(() => {
+    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
+      hasWarned.current = true;
+    }
+  }, [props.placeholder]);
 
   let isMobile = useIsMobileDevice();
   if (isMobile) {
diff --git a/packages/@react-spectrum/searchfield/src/SearchField.tsx b/packages/@react-spectrum/searchfield/src/SearchField.tsx
index 561cddd26c7..9946bf7b00b 100644
--- a/packages/@react-spectrum/searchfield/src/SearchField.tsx
+++ b/packages/@react-spectrum/searchfield/src/SearchField.tsx
@@ -13,7 +13,7 @@
 import {classNames, useSlotProps} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
-import React, {forwardRef, ReactElement, Ref, useRef} from 'react';
+import React, {forwardRef, ReactElement, Ref, useEffect, useRef} from 'react';
 import {SpectrumSearchFieldProps} from '@react-types/searchfield';
 import styles from '@adobe/spectrum-css-temp/components/search/vars.css';
 import {TextFieldBase} from '@react-spectrum/textfield';
@@ -42,9 +42,13 @@ export const SearchField = forwardRef(function SearchField(props: SpectrumSearch
     ...otherProps
   } = props;
 
-  if (placeholder && process.env.NODE_ENV !== 'production') {
-    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/SearchField.html#help-text');
-  }
+  let hasWarned = useRef(false);
+  useEffect(() => {
+    if (placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/SearchField.html#help-text');
+      hasWarned.current = true;
+    }
+  }, [placeholder]);
 
   let state = useSearchFieldState(props);
   let inputRef = useRef<HTMLInputElement>(null);
diff --git a/packages/@react-spectrum/textfield/src/TextArea.tsx b/packages/@react-spectrum/textfield/src/TextArea.tsx
index 6e08d5ce71d..2424823560b 100644
--- a/packages/@react-spectrum/textfield/src/TextArea.tsx
+++ b/packages/@react-spectrum/textfield/src/TextArea.tsx
@@ -11,7 +11,7 @@
  */
 
 import {chain, useLayoutEffect} from '@react-aria/utils';
-import React, {Ref, useCallback, useRef} from 'react';
+import React, {Ref, useCallback, useEffect, useRef} from 'react';
 import {SpectrumTextAreaProps, SpectrumTextFieldBaseProps, TextFieldRef} from '@react-types/textfield';
 import {TextFieldBase} from './TextFieldBase';
 import {useControlledState} from '@react-stately/utils';
@@ -69,9 +69,13 @@ export const TextArea = React.forwardRef(function TextArea(props: SpectrumTextAr
     }
   }, [onHeightChange, inputValue, inputRef]);
 
-  if (props.placeholder && process.env.NODE_ENV !== 'production') {
-    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
-  }
+  let hasWarned = useRef(false);
+  useEffect(() => {
+    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');
+      hasWarned.current = true;
+    }
+  }, [props.placeholder]);
 
   let result = useTextField({
     ...props,
diff --git a/packages/@react-spectrum/textfield/src/TextField.tsx b/packages/@react-spectrum/textfield/src/TextField.tsx
index ed11a4295f7..4381c066d60 100644
--- a/packages/@react-spectrum/textfield/src/TextField.tsx
+++ b/packages/@react-spectrum/textfield/src/TextField.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {forwardRef, Ref, useRef} from 'react';
+import React, {forwardRef, Ref, useEffect, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import {TextFieldBase} from './TextFieldBase';
 import {useFormProps} from '@react-spectrum/form';
@@ -29,9 +29,13 @@ export const TextField = forwardRef(function TextField(props: SpectrumTextFieldP
   let inputRef = useRef<HTMLInputElement>(null);
   let result = useTextField(props, inputRef);
 
-  if (props.placeholder && process.env.NODE_ENV !== 'production') {
-    console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
-  }
+  let hasWarned = useRef(false);
+  useEffect(() => {
+    if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {
+      console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');
+      hasWarned.current = true;
+    }
+  }, [props.placeholder]);
 
   return (
     <TextFieldBase