diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 039ef7c2a079..d779ab856fb5 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -1,7 +1,8 @@ import PropTypes from 'prop-types'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import _ from 'underscore'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -77,18 +78,24 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { }); }, [reports, personalDetails, searchValue, betas]); + const debouncedUpdateOptions = useMemo(() => _.debounce(updateOptions, 75), [updateOptions]); + useEffect(() => { Timing.start(CONST.TIMING.SEARCH_RENDER); Performance.markStart(CONST.TIMING.SEARCH_RENDER); }, []); + useEffect(() => { + updateOptions(); + }, [reports, personalDetails, betas, updateOptions]); + useEffect(() => { if (!isMounted.current) { isMounted.current = true; return; } - updateOptions(); + debouncedUpdateOptions(); // Ignoring the rule intentionally, we want to run the code only when search Value changes to prevent additional runs. // eslint-disable-next-line react-hooks/exhaustive-deps }, [searchValue]); @@ -177,6 +184,7 @@ function SearchPage({betas, personalDetails, reports, isSearchingForReports}) {