avoid showing placeholder warning every render (#8682)

Author: reidbarber

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) {

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} />;

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) {

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);

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,

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