diff --git a/src/components/FeedHeader/components/Controls/Controls.tsx b/src/components/FeedHeader/components/Controls/Controls.tsx index a5eaefd2..dc8d7a90 100644 --- a/src/components/FeedHeader/components/Controls/Controls.tsx +++ b/src/components/FeedHeader/components/Controls/Controls.tsx @@ -77,14 +77,17 @@ export const Controls = ({ }); }; - const handleSearch = (searchValue: string) => { - setSearch(searchValue); + const handleSearch = React.useCallback( + (searchValue: string) => { + setSearch(searchValue); - handleLoadData({ - page: DEFAULT_PAGE, - query: {search: searchValue, page: DEFAULT_PAGE}, - }); - }; + handleLoadData({ + page: DEFAULT_PAGE, + query: {search: searchValue, page: DEFAULT_PAGE}, + }); + }, + [handleLoadData], + ); const handleTagSelect = (selectedTags: string[]) => { const event = prepareAnalyticsEvent({ diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 656fa6e4..59bc2673 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -46,7 +46,17 @@ export const Search = ({ autoFocus = false, value: externalValue, }: SearchProps) => { - const handleChange = lodashDebounce(onSubmit, debounce); + const onSubmitRef = React.useRef(onSubmit); + onSubmitRef.current = onSubmit; + + const handleChange = React.useMemo( + () => + lodashDebounce( + (...args: Parameters) => onSubmitRef.current(...args), + debounce, + ), + [debounce], + ); const [value, setValue] = React.useState(initialValue); const inputRef = React.useRef(null);