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:
committed by
Facebook GitHub Bot
parent
85abad2daf
commit
048cfe27d9
@@ -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]);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user