Skip to content

Commit fdf4d83

Browse files
mrkldshvalex-page
mrkldshv
and
alex-page
authored
[polaris.shopify.com] Fix React hooks warnings in examples (#6756)
* fix: add missing dependecies, wrap variables in useMemo * Update README files * Delete nervous-needles-walk.md * Create pretty-zebras-complain.md Co-authored-by: Alex Page <[email protected]>
1 parent 2afee74 commit fdf4d83

18 files changed

+318
-255
lines changed

‎.changeset/pretty-zebras-complain.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': patch
3+
'polaris.shopify.com': patch
4+
---
5+
6+
Fixed react hook errors across examples

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ function AccountConnectionExample() {
107107

108108
const handleAction = useCallback(() => {
109109
setConnected((connected) => !connected);
110-
}, [connected]);
110+
}, []);
111111

112112
const buttonText = connected ? 'Disconnect' : 'Connect';
113113
const details = connected ? 'Account connected' : 'No account connected';

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

Lines changed: 80 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,16 @@ Use to help merchants complete text input quickly from a list of options.
4040

4141
```jsx
4242
function AutocompleteExample() {
43-
const deselectedOptions = [
44-
{value: 'rustic', label: 'Rustic'},
45-
{value: 'antique', label: 'Antique'},
46-
{value: 'vinyl', label: 'Vinyl'},
47-
{value: 'vintage', label: 'Vintage'},
48-
{value: 'refurbished', label: 'Refurbished'},
49-
];
43+
const deselectedOptions = useMemo(
44+
() => [
45+
{value: 'rustic', label: 'Rustic'},
46+
{value: 'antique', label: 'Antique'},
47+
{value: 'vinyl', label: 'Vinyl'},
48+
{value: 'vintage', label: 'Vintage'},
49+
{value: 'refurbished', label: 'Refurbished'},
50+
],
51+
[],
52+
);
5053
const [selectedOptions, setSelectedOptions] = useState([]);
5154
const [inputValue, setInputValue] = useState('');
5255
const [options, setOptions] = useState(deselectedOptions);
@@ -113,13 +116,16 @@ Use to help merchants select multiple options from a list curated by the text in
113116

114117
```jsx
115118
function MultiAutocompleteExample() {
116-
const deselectedOptions = [
117-
{value: 'rustic', label: 'Rustic'},
118-
{value: 'antique', label: 'Antique'},
119-
{value: 'vinyl', label: 'Vinyl'},
120-
{value: 'vintage', label: 'Vintage'},
121-
{value: 'refurbished', label: 'Refurbished'},
122-
];
119+
const deselectedOptions = useMemo(
120+
() => [
121+
{value: 'rustic', label: 'Rustic'},
122+
{value: 'antique', label: 'Antique'},
123+
{value: 'vinyl', label: 'Vinyl'},
124+
{value: 'vintage', label: 'Vintage'},
125+
{value: 'refurbished', label: 'Refurbished'},
126+
],
127+
[],
128+
);
123129
const [selectedOptions, setSelectedOptions] = useState(['rustic']);
124130
const [inputValue, setInputValue] = useState('');
125131
const [options, setOptions] = useState(deselectedOptions);
@@ -146,10 +152,13 @@ function MultiAutocompleteExample() {
146152
[deselectedOptions],
147153
);
148154

149-
const handleSelect = useCallback((selected) => {
150-
setSelectedOptions(selected);
151-
updateText('');
152-
}, []);
155+
const handleSelect = useCallback(
156+
(selected) => {
157+
setSelectedOptions(selected);
158+
updateText('');
159+
},
160+
[updateText],
161+
);
153162

154163
const removeTag = useCallback(
155164
(tag) => (event) => {
@@ -320,13 +329,16 @@ Use to indicate loading state to merchants while option data is processing.
320329

321330
```jsx
322331
function AutocompleteExample() {
323-
const deselectedOptions = [
324-
{value: 'rustic', label: 'Rustic'},
325-
{value: 'antique', label: 'Antique'},
326-
{value: 'vinyl', label: 'Vinyl'},
327-
{value: 'vintage', label: 'Vintage'},
328-
{value: 'refurbished', label: 'Refurbished'},
329-
];
332+
const deselectedOptions = useMemo(
333+
() => [
334+
{value: 'rustic', label: 'Rustic'},
335+
{value: 'antique', label: 'Antique'},
336+
{value: 'vinyl', label: 'Vinyl'},
337+
{value: 'vintage', label: 'Vintage'},
338+
{value: 'refurbished', label: 'Refurbished'},
339+
],
340+
[],
341+
);
330342
const [selectedOptions, setSelectedOptions] = useState([]);
331343
const [inputValue, setInputValue] = useState('');
332344
const [options, setOptions] = useState(deselectedOptions);
@@ -354,7 +366,7 @@ function AutocompleteExample() {
354366
setLoading(false);
355367
}, 300);
356368
},
357-
[deselectedOptions, options, loading],
369+
[deselectedOptions, loading],
358370
);
359371

360372
const updateSelection = useCallback(
@@ -464,7 +476,7 @@ function AutoCompleteLazyLoadExample() {
464476
setOptions(resultOptions);
465477
setInputValue;
466478
},
467-
[deselectedOptions, options],
479+
[deselectedOptions],
468480
);
469481

470482
const textField = (
@@ -530,13 +542,16 @@ Use to indicate there are no search results.
530542

531543
```jsx
532544
function AutocompleteExample() {
533-
const deselectedOptions = [
534-
{value: 'rustic', label: 'Rustic'},
535-
{value: 'antique', label: 'Antique'},
536-
{value: 'vinyl', label: 'Vinyl'},
537-
{value: 'vintage', label: 'Vintage'},
538-
{value: 'refurbished', label: 'Refurbished'},
539-
];
545+
const deselectedOptions = useMemo(
546+
() => [
547+
{value: 'rustic', label: 'Rustic'},
548+
{value: 'antique', label: 'Antique'},
549+
{value: 'vinyl', label: 'Vinyl'},
550+
{value: 'vintage', label: 'Vintage'},
551+
{value: 'refurbished', label: 'Refurbished'},
552+
],
553+
[],
554+
);
540555
const [selectedOptions, setSelectedOptions] = useState([]);
541556
const [inputValue, setInputValue] = useState('');
542557
const [options, setOptions] = useState(deselectedOptions);
@@ -564,7 +579,7 @@ function AutocompleteExample() {
564579
setLoading(false);
565580
}, 300);
566581
},
567-
[deselectedOptions, loading, options],
582+
[deselectedOptions, loading],
568583
);
569584

570585
const updateSelection = useCallback(
@@ -621,13 +636,16 @@ Use to help merchants complete an action quickly.
621636

622637
```jsx
623638
function AutocompleteActionBeforeExample() {
624-
const deselectedOptions = [
625-
{value: 'rustic', label: 'Rustic'},
626-
{value: 'antique', label: 'Antique'},
627-
{value: 'vinyl', label: 'Vinyl'},
628-
{value: 'vintage', label: 'Vintage'},
629-
{value: 'refurbished', label: 'Refurbished'},
630-
];
639+
const deselectedOptions = useMemo(
640+
() => [
641+
{value: 'rustic', label: 'Rustic'},
642+
{value: 'antique', label: 'Antique'},
643+
{value: 'vinyl', label: 'Vinyl'},
644+
{value: 'vintage', label: 'Vintage'},
645+
{value: 'refurbished', label: 'Refurbished'},
646+
],
647+
[],
648+
);
631649
const [selectedOptions, setSelectedOptions] = useState([]);
632650
const [inputValue, setInputValue] = useState('');
633651
const [options, setOptions] = useState(deselectedOptions);
@@ -714,13 +732,16 @@ Use to help merchants complete an action quickly with wrapping lines of text.
714732

715733
```jsx
716734
function AutocompleteActionBeforeExample() {
717-
const deselectedOptions = [
718-
{value: 'rustic', label: 'Rustic'},
719-
{value: 'antique', label: 'Antique'},
720-
{value: 'vinyl', label: 'Vinyl'},
721-
{value: 'vintage', label: 'Vintage'},
722-
{value: 'refurbished', label: 'Refurbished'},
723-
];
735+
const deselectedOptions = useMemo(
736+
() => [
737+
{value: 'rustic', label: 'Rustic'},
738+
{value: 'antique', label: 'Antique'},
739+
{value: 'vinyl', label: 'Vinyl'},
740+
{value: 'vintage', label: 'Vintage'},
741+
{value: 'refurbished', label: 'Refurbished'},
742+
],
743+
[],
744+
);
724745
const [selectedOptions, setSelectedOptions] = useState([]);
725746
const [inputValue, setInputValue] = useState('');
726747
const [options, setOptions] = useState(deselectedOptions);
@@ -809,13 +830,16 @@ Use to help merchants complete a destructive action quickly.
809830

810831
```jsx
811832
function AutocompleteActionBeforeExample() {
812-
const deselectedOptions = [
813-
{value: 'rustic', label: 'Rustic'},
814-
{value: 'antique', label: 'Antique'},
815-
{value: 'vinyl', label: 'Vinyl'},
816-
{value: 'vintage', label: 'Vintage'},
817-
{value: 'refurbished', label: 'Refurbished'},
818-
];
833+
const deselectedOptions = useMemo(
834+
() => [
835+
{value: 'rustic', label: 'Rustic'},
836+
{value: 'antique', label: 'Antique'},
837+
{value: 'vinyl', label: 'Vinyl'},
838+
{value: 'vintage', label: 'Vintage'},
839+
{value: 'refurbished', label: 'Refurbished'},
840+
],
841+
[],
842+
);
819843
const [selectedOptions, setSelectedOptions] = useState([]);
820844
const [inputValue, setInputValue] = useState('');
821845
const [options, setOptions] = useState(deselectedOptions);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,7 @@ function MultiAutoComboboxExample() {
317317

318318
updateText('');
319319
},
320-
[options, selectedOptions],
320+
[options, selectedOptions, updateText],
321321
);
322322

323323
const removeTag = useCallback(
@@ -435,7 +435,7 @@ function MultiManualComboboxExample() {
435435

436436
updateText('');
437437
},
438-
[options, selectedOptions],
438+
[options, selectedOptions, updateText],
439439
);
440440

441441
const removeTag = useCallback(

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

Lines changed: 72 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -681,80 +681,86 @@ Use to provide an autocomplete suggestion inline with the input value. See the c
681681

682682
```jsx
683683
function TextFieldWithSuggestionExample() {
684-
const suggestions = [
685-
'Alabama',
686-
'Alaska',
687-
'American Samoa',
688-
'Arizona',
689-
'Arkansas',
690-
'California',
691-
'Colorado',
692-
'Connecticut',
693-
'Delaware',
694-
'District of Columbia',
695-
'Florida',
696-
'Georgia',
697-
'Guam',
698-
'Hawaii',
699-
'Idaho',
700-
'Illinois',
701-
'Indiana',
702-
'Iowa',
703-
'Kansas',
704-
'Kentucky',
705-
'Louisiana',
706-
'Maine',
707-
'Maryland',
708-
'Massachusetts',
709-
'Michigan',
710-
'Minnesota',
711-
'Minor Outlying Islands',
712-
'Mississippi',
713-
'Missouri',
714-
'Montana',
715-
'Nebraska',
716-
'Nevada',
717-
'New Hampshire',
718-
'New Jersey',
719-
'New Mexico',
720-
'New York',
721-
'North Carolina',
722-
'North Dakota',
723-
'Northern Mariana Islands',
724-
'Ohio',
725-
'Oklahoma',
726-
'Oregon',
727-
'Pennsylvania',
728-
'Puerto Rico',
729-
'Rhode Island',
730-
'South Carolina',
731-
'South Dakota',
732-
'Tennessee',
733-
'Texas',
734-
'U.S. Virgin Islands',
735-
'Utah',
736-
'Vermont',
737-
'Virginia',
738-
'Washington',
739-
'West Virginia',
740-
'Wisconsin',
741-
'Wyoming',
742-
];
684+
const suggestions = useMemo(
685+
() => [
686+
'Alabama',
687+
'Alaska',
688+
'American Samoa',
689+
'Arizona',
690+
'Arkansas',
691+
'California',
692+
'Colorado',
693+
'Connecticut',
694+
'Delaware',
695+
'District of Columbia',
696+
'Florida',
697+
'Georgia',
698+
'Guam',
699+
'Hawaii',
700+
'Idaho',
701+
'Illinois',
702+
'Indiana',
703+
'Iowa',
704+
'Kansas',
705+
'Kentucky',
706+
'Louisiana',
707+
'Maine',
708+
'Maryland',
709+
'Massachusetts',
710+
'Michigan',
711+
'Minnesota',
712+
'Minor Outlying Islands',
713+
'Mississippi',
714+
'Missouri',
715+
'Montana',
716+
'Nebraska',
717+
'Nevada',
718+
'New Hampshire',
719+
'New Jersey',
720+
'New Mexico',
721+
'New York',
722+
'North Carolina',
723+
'North Dakota',
724+
'Northern Mariana Islands',
725+
'Ohio',
726+
'Oklahoma',
727+
'Oregon',
728+
'Pennsylvania',
729+
'Puerto Rico',
730+
'Rhode Island',
731+
'South Carolina',
732+
'South Dakota',
733+
'Tennessee',
734+
'Texas',
735+
'U.S. Virgin Islands',
736+
'Utah',
737+
'Vermont',
738+
'Virginia',
739+
'Washington',
740+
'West Virginia',
741+
'Wisconsin',
742+
'Wyoming',
743+
],
744+
[],
745+
);
743746

744747
const [value, setValue] = useState('');
745748
const [suggestion, setSuggestion] = useState('');
746749

747-
const handleSuggestion = useCallback((nextValue) => {
748-
const nextSuggestion = suggestions.find((suggestion) =>
749-
suggestion.toLowerCase().startsWith(nextValue.toLowerCase()),
750-
);
750+
const handleSuggestion = useCallback(
751+
(nextValue) => {
752+
const nextSuggestion = suggestions.find((suggestion) =>
753+
suggestion.toLowerCase().startsWith(nextValue.toLowerCase()),
754+
);
751755

752-
if (nextSuggestion) setSuggestion(nextSuggestion);
753-
}, []);
756+
if (nextSuggestion) setSuggestion(nextSuggestion);
757+
},
758+
[suggestions],
759+
);
754760

755761
useEffect(() => {
756762
if (value !== suggestion) handleSuggestion(value);
757-
}, [value]);
763+
}, [handleSuggestion, suggestion, value]);
758764

759765
const handleChange = useCallback((value) => {
760766
setValue(value);

0 commit comments

Comments
 (0)