From 048cfe27d9da0c17d1c225571b9f12ea3e5c20e5 Mon Sep 17 00:00:00 2001
From: John Knox <jknox@fb.com>
Date: Wed, 18 Mar 2020 06:32:48 -0700
Subject: [PATCH] Fix update loop in PluginInstaller

Summary:
This is especially noticable on a slow internet connection.

If you type the search query quickly, it gets into a state update loop where:
* You type a character, it starts searching
* You type another character, it starts searching
* The first search finishes, updates the results and also updates the query
* This query change kicks off a new search...
* The second search finishes, updates the results... etc.

Fixed by never updating the query after searching. Instead, just discard search results if they come back after the component has changed. Use the cleanup feature of the effect hook for this.

Video of loop:
https://our.intern.facebook.com/intern/px/p/13Qc5

Reviewed By: mweststrate

Differential Revision: D20510360

fbshipit-source-id: 69ca39368fcfefc37b8f7251e059695ae738ddc0
---
 desktop/src/chrome/plugin-manager/PluginInstaller.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/desktop/src/chrome/plugin-manager/PluginInstaller.tsx b/desktop/src/chrome/plugin-manager/PluginInstaller.tsx
index f759967b3..8820f4177 100644
--- a/desktop/src/chrome/plugin-manager/PluginInstaller.tsx
+++ b/desktop/src/chrome/plugin-manager/PluginInstaller.tsx
@@ -401,6 +401,7 @@ function useNPMSearch(
 
   useEffect(() => {
     (async () => {
+      let cancelled = false;
       const {hits} = await reportPlatformFailures(
         index.search<PluginDefinition>('', {
           query,
@@ -409,11 +410,17 @@ function useNPMSearch(
         }) as Promise<SearchResponse<PluginDefinition>>,
         `${TAG}:queryIndex`,
       );
-
+      if (cancelled) {
+        return;
+      }
       setSearchResults(
         hits.filter(hit => !installedPlugins.has(hit.name)).map(liftUpdatable),
       );
-      setQuery(query);
+
+      // Clean up: if query changes while we're searching, abandon results.
+      return () => {
+        cancelled = true;
+      };
     })();
   }, [query, installedPlugins]);