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
This commit is contained in:
John Knox
2020-03-18 06:32:48 -07:00
committed by Facebook GitHub Bot
parent 85abad2daf
commit 048cfe27d9

View File

@@ -401,6 +401,7 @@ function useNPMSearch(
useEffect(() => { useEffect(() => {
(async () => { (async () => {
let cancelled = false;
const {hits} = await reportPlatformFailures( const {hits} = await reportPlatformFailures(
index.search<PluginDefinition>('', { index.search<PluginDefinition>('', {
query, query,
@@ -409,11 +410,17 @@ function useNPMSearch(
}) as Promise<SearchResponse<PluginDefinition>>, }) as Promise<SearchResponse<PluginDefinition>>,
`${TAG}:queryIndex`, `${TAG}:queryIndex`,
); );
if (cancelled) {
return;
}
setSearchResults( setSearchResults(
hits.filter(hit => !installedPlugins.has(hit.name)).map(liftUpdatable), 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]); }, [query, installedPlugins]);