[polaris.shopify.com] Fix React hooks warnings in examples

.changeset/pretty-zebras-complain.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Fixed react hook errors across examples

polaris-react/src/components/AccountConnection/README.md

@@ -107,7 +107,7 @@ function AccountConnectionExample() {
 
   const handleAction = useCallback(() => {
     setConnected((connected) => !connected);
-  }, [connected]);
+  }, []);
 
   const buttonText = connected ? 'Disconnect' : 'Connect';
   const details = connected ? 'Account connected' : 'No account connected';

polaris-react/src/components/Autocomplete/README.md

@@ -40,13 +40,16 @@ Use to help merchants complete text input quickly from a list of options.
 
 ```jsx
 function AutocompleteExample() {
-  const deselectedOptions = [
-    {value: 'rustic', label: 'Rustic'},
-    {value: 'antique', label: 'Antique'},
-    {value: 'vinyl', label: 'Vinyl'},
-    {value: 'vintage', label: 'Vintage'},
-    {value: 'refurbished', label: 'Refurbished'},
-  ];
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);
@@ -113,13 +116,16 @@ Use to help merchants select multiple options from a list curated by the text in
 
 ```jsx
 function MultiAutocompleteExample() {
-  const deselectedOptions = [
-    {value: 'rustic', label: 'Rustic'},
-    {value: 'antique', label: 'Antique'},
-    {value: 'vinyl', label: 'Vinyl'},
-    {value: 'vintage', label: 'Vintage'},
-    {value: 'refurbished', label: 'Refurbished'},
-  ];
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
   const [selectedOptions, setSelectedOptions] = useState(['rustic']);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);
@@ -146,10 +152,13 @@ function MultiAutocompleteExample() {
     [deselectedOptions],
   );
 
-  const handleSelect = useCallback((selected) => {
-    setSelectedOptions(selected);
-    updateText('');
-  }, []);
+  const handleSelect = useCallback(
+    (selected) => {
+      setSelectedOptions(selected);
+      updateText('');
+    },
+    [updateText],
+  );
 
   const removeTag = useCallback(
     (tag) => (event) => {
@@ -320,13 +329,16 @@ Use to indicate loading state to merchants while option data is processing.
 
 ```jsx
 function AutocompleteExample() {
-  const deselectedOptions = [
-    {value: 'rustic', label: 'Rustic'},
-    {value: 'antique', label: 'Antique'},
-    {value: 'vinyl', label: 'Vinyl'},
-    {value: 'vintage', label: 'Vintage'},
-    {value: 'refurbished', label: 'Refurbished'},
-  ];
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);
@@ -354,7 +366,7 @@ function AutocompleteExample() {
         setLoading(false);
       }, 300);
     },
-    [deselectedOptions, options, loading],
+    [deselectedOptions, loading],
   );
 
   const updateSelection = useCallback(
@@ -464,7 +476,7 @@ function AutoCompleteLazyLoadExample() {
       setOptions(resultOptions);
       setInputValue;
     },
-    [deselectedOptions, options],
+    [deselectedOptions],
   );
 
   const textField = (
@@ -530,13 +542,16 @@ Use to indicate there are no search results.
 
 ```jsx
 function AutocompleteExample() {
-  const deselectedOptions = [
-    {value: 'rustic', label: 'Rustic'},
-    {value: 'antique', label: 'Antique'},
-    {value: 'vinyl', label: 'Vinyl'},
-    {value: 'vintage', label: 'Vintage'},
-    {value: 'refurbished', label: 'Refurbished'},
-  ];
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);
@@ -564,7 +579,7 @@ function AutocompleteExample() {
         setLoading(false);
       }, 300);
     },
-    [deselectedOptions, loading, options],
+    [deselectedOptions, loading],
   );
 
   const updateSelection = useCallback(
@@ -621,13 +636,16 @@ Use to help merchants complete an action quickly.
 
 ```jsx
 function AutocompleteActionBeforeExample() {
-  const deselectedOptions = [
-    {value: 'rustic', label: 'Rustic'},
-    {value: 'antique', label: 'Antique'},
-    {value: 'vinyl', label: 'Vinyl'},
-    {value: 'vintage', label: 'Vintage'},
-    {value: 'refurbished', label: 'Refurbished'},
-  ];
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);
@@ -714,13 +732,16 @@ Use to help merchants complete an action quickly with wrapping lines of text.
 
 ```jsx
 function AutocompleteActionBeforeExample() {
-  const deselectedOptions = [
-    {value: 'rustic', label: 'Rustic'},
-    {value: 'antique', label: 'Antique'},
-    {value: 'vinyl', label: 'Vinyl'},
-    {value: 'vintage', label: 'Vintage'},
-    {value: 'refurbished', label: 'Refurbished'},
-  ];
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);
@@ -809,13 +830,16 @@ Use to help merchants complete a destructive action quickly.
 
 ```jsx
 function AutocompleteActionBeforeExample() {
-  const deselectedOptions = [
-    {value: 'rustic', label: 'Rustic'},
-    {value: 'antique', label: 'Antique'},
-    {value: 'vinyl', label: 'Vinyl'},
-    {value: 'vintage', label: 'Vintage'},
-    {value: 'refurbished', label: 'Refurbished'},
-  ];
+  const deselectedOptions = useMemo(
+    () => [
+      {value: 'rustic', label: 'Rustic'},
+      {value: 'antique', label: 'Antique'},
+      {value: 'vinyl', label: 'Vinyl'},
+      {value: 'vintage', label: 'Vintage'},
+      {value: 'refurbished', label: 'Refurbished'},
+    ],
+    [],
+  );
   const [selectedOptions, setSelectedOptions] = useState([]);
   const [inputValue, setInputValue] = useState('');
   const [options, setOptions] = useState(deselectedOptions);

polaris-react/src/components/Combobox/README.md

@@ -317,7 +317,7 @@ function MultiAutoComboboxExample() {
 
       updateText('');
     },
-    [options, selectedOptions],
+    [options, selectedOptions, updateText],
   );
 
   const removeTag = useCallback(
@@ -435,7 +435,7 @@ function MultiManualComboboxExample() {
 
       updateText('');
     },
-    [options, selectedOptions],
+    [options, selectedOptions, updateText],
   );
 
   const removeTag = useCallback(

polaris-react/src/components/TextField/README.md

@@ -681,80 +681,86 @@ Use to provide an autocomplete suggestion inline with the input value. See the c
 
 ```jsx
 function TextFieldWithSuggestionExample() {
-  const suggestions = [
-    'Alabama',
-    'Alaska',
-    'American Samoa',
-    'Arizona',
-    'Arkansas',
-    'California',
-    'Colorado',
-    'Connecticut',
-    'Delaware',
-    'District of Columbia',
-    'Florida',
-    'Georgia',
-    'Guam',
-    'Hawaii',
-    'Idaho',
-    'Illinois',
-    'Indiana',
-    'Iowa',
-    'Kansas',
-    'Kentucky',
-    'Louisiana',
-    'Maine',
-    'Maryland',
-    'Massachusetts',
-    'Michigan',
-    'Minnesota',
-    'Minor Outlying Islands',
-    'Mississippi',
-    'Missouri',
-    'Montana',
-    'Nebraska',
-    'Nevada',
-    'New Hampshire',
-    'New Jersey',
-    'New Mexico',
-    'New York',
-    'North Carolina',
-    'North Dakota',
-    'Northern Mariana Islands',
-    'Ohio',
-    'Oklahoma',
-    'Oregon',
-    'Pennsylvania',
-    'Puerto Rico',
-    'Rhode Island',
-    'South Carolina',
-    'South Dakota',
-    'Tennessee',
-    'Texas',
-    'U.S. Virgin Islands',
-    'Utah',
-    'Vermont',
-    'Virginia',
-    'Washington',
-    'West Virginia',
-    'Wisconsin',
-    'Wyoming',
-  ];
+  const suggestions = useMemo(
+    () => [
+      'Alabama',
+      'Alaska',
+      'American Samoa',
+      'Arizona',
+      'Arkansas',
+      'California',
+      'Colorado',
+      'Connecticut',
+      'Delaware',
+      'District of Columbia',
+      'Florida',
+      'Georgia',
+      'Guam',
+      'Hawaii',
+      'Idaho',
+      'Illinois',
+      'Indiana',
+      'Iowa',
+      'Kansas',
+      'Kentucky',
+      'Louisiana',
+      'Maine',
+      'Maryland',
+      'Massachusetts',
+      'Michigan',
+      'Minnesota',
+      'Minor Outlying Islands',
+      'Mississippi',
+      'Missouri',
+      'Montana',
+      'Nebraska',
+      'Nevada',
+      'New Hampshire',
+      'New Jersey',
+      'New Mexico',
+      'New York',
+      'North Carolina',
+      'North Dakota',
+      'Northern Mariana Islands',
+      'Ohio',
+      'Oklahoma',
+      'Oregon',
+      'Pennsylvania',
+      'Puerto Rico',
+      'Rhode Island',
+      'South Carolina',
+      'South Dakota',
+      'Tennessee',
+      'Texas',
+      'U.S. Virgin Islands',
+      'Utah',
+      'Vermont',
+      'Virginia',
+      'Washington',
+      'West Virginia',
+      'Wisconsin',
+      'Wyoming',
+    ],
+    [],
+  );
 
   const [value, setValue] = useState('');
   const [suggestion, setSuggestion] = useState('');
 
-  const handleSuggestion = useCallback((nextValue) => {
-    const nextSuggestion = suggestions.find((suggestion) =>
-      suggestion.toLowerCase().startsWith(nextValue.toLowerCase()),
-    );
+  const handleSuggestion = useCallback(
+    (nextValue) => {
+      const nextSuggestion = suggestions.find((suggestion) =>
+        suggestion.toLowerCase().startsWith(nextValue.toLowerCase()),
+      );
 
-    if (nextSuggestion) setSuggestion(nextSuggestion);
-  }, []);
+      if (nextSuggestion) setSuggestion(nextSuggestion);
+    },
+    [suggestions],
+  );
 
   useEffect(() => {
     if (value !== suggestion) handleSuggestion(value);
-  }, [value]);
+  }, [handleSuggestion, suggestion, value]);
 
   const handleChange = useCallback((value) => {
     setValue(value);