fix: avoid duplicated /SearchForReport calls

docs/_data/_routes.yml

@@ -11,7 +11,7 @@ platforms:
     url: www.expensify.com
     description: "Your account settings look like this:"
     image: /assets/images/settings-old-dot.svg
-
+  
     # Hubs are comprised of subcategories and articles. Subcategories contain multiple related articles, but there can be standalone articles as well
     hubs:
       - href: getting-started
@@ -38,7 +38,7 @@ platforms:
         title: Domains
         icon: /assets/images/domains.svg
         description: Claim and verify your company’s domain to access additional management and security features.
-
+      
       - href: bank-accounts-and-payments
         title: Bank Accounts & Payments
         icon: /assets/images/send-money.svg
@@ -88,16 +88,16 @@ platforms:
         title: Travel
         icon: /assets/images/plane.svg
         description: Manage all your corporate travel needs with Expensify Travel.
-
-
+     
+        
   - href: new-expensify
     title: New Expensify
     hub-title: New Expensify - Help & Resources
     hub-description: Questions? Find the answers by clicking a Category or using the search bar.
     url: new.expensify.com
     description: "Your account settings look like this:"
     image: /assets/images/settings-new-dot.svg
-
+  
     hubs:
       - href: getting-started
         title: Getting Started
@@ -113,7 +113,7 @@ platforms:
         title: Workspaces
         icon: /assets/images/shield.svg
         description: Configure rules, settings, and limits for your company’s spending.
-
+      
       - href: reports-and-expenses
         title: Reports & Expenses
         icon: /assets/images/envelope-receipt.svg
@@ -128,12 +128,12 @@ platforms:
         title: Connect Credit Cards
         icon: /assets/images/bank-card.svg
         description: Track credit card transactions and reconcile company cards.
-
+        
       - href: expensify-card
         title: Expensify Card
         icon: /assets/images/hand-card.svg
         description: Explore the perks and benefits of the Expensify Card.
-
+      
       - href: travel
         title: Travel
         icon: /assets/images/plane.svg
@@ -148,13 +148,9 @@ platforms:
         title: Settings
         icon: /assets/images/gears.svg
         description: Manage profile settings and notifications.
-
+        
       - href: billing-and-subscriptions
         title: Expensify Billing & Subscriptions
         icon: /assets/images/subscription-annual.svg
         description: Review Expensify's subscription options, plan types, and payment methods.
-
-      - href: search-overview
-        title: Search Functionality in New Expensify
-        icon: /assets/images/magnifying-glass.svg
-        description: Search feature overview.
+

src/components/Search/SearchAutocompleteList.tsx

@@ -1,5 +1,5 @@
 import {Str} from 'expensify-common';
-import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -503,14 +503,28 @@ function SearchAutocompleteList(
         return reportOptions.slice(0, 20);
     }, [autocompleteQueryValue, filterOptions, searchOptions]);
 
+    // Store the initial query value
+    const initialRenderRef = useRef(true);
+    const prevQueryRef = useRef(autocompleteQueryValue);
+
     useEffect(() => {
         if (!handleSearch) {
             return;
         }
-        handleSearch(autocompleteQueryValue);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [autocompleteQueryValue]);
+
+        // If this is the first render, just store the query but don't call the API
+        if (initialRenderRef.current) {
+            initialRenderRef.current = false;
+            prevQueryRef.current = autocompleteQueryValue;
+            return;
+        }
+
+        // Only call the API if the query has changed from the previous value
+        if (prevQueryRef.current !== autocompleteQueryValue) {
+            prevQueryRef.current = autocompleteQueryValue;
+            handleSearch(autocompleteQueryValue);
+        }
+    }, [autocompleteQueryValue, handleSearch]);
 
     /* Sections generation */
     const sections: Array<SectionListDataType<OptionData | SearchQueryItem>> = [];

src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

@@ -119,6 +119,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
 
     useEffect(() => {
         setTextInputValue(isDefaultQuery ? '' : queryText);
+        setAutocompleteQueryValue(isDefaultQuery ? '' : queryText);
     }, [isDefaultQuery, queryText]);
 
     useEffect(() => {

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -239,10 +239,6 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
         [setSelection, setTextInputValue],
     );
 
-    const handleSearchAction = (value: string) => {
-        searchInServer(value);
-    };
-
     const onListItemPress = useCallback(
         (item: OptionData | SearchQueryItem) => {
             if (isSearchQueryItem(item)) {
@@ -351,7 +347,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
                     />
                     <SearchAutocompleteList
                         autocompleteQueryValue={autocompleteQueryValue || textInputValue}
-                        handleSearch={handleSearchAction}
+                        handleSearch={searchInServer}
                         searchQueryItem={searchQueryItem}
                         getAdditionalSections={getAdditionalSections}
                         onListItemPress={onListItemPress}