fix(useInstantSearch): results is null when first search is stalled (#3597)

* fix(useSearchResults): results is null when first search is stalled

* updated test and added context in comment

* Update packages/react-instantsearch-hooks/src/lib/__tests__/useSearchResults.test.tsx

Co-authored-by: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>

* Update packages/react-instantsearch-hooks/src/lib/useSearchResults.ts

Co-authored-by: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>

Co-authored-by: Sarah Dayan <5370675+sarahdayan@users.noreply.github.com>

Author: aymeric-giraudet

packages/react-instantsearch-hooks/src/lib/__tests__/useSearchResults.test.tsx

@@ -3,6 +3,10 @@ import { AlgoliaSearchHelper, SearchResults } from 'algoliasearch-helper';
 import React from 'react';
 import { SearchBox } from 'react-instantsearch-hooks-web';
 
+import {
+  createMultiSearchResponse,
+  createSearchClient,
+} from '../../../../../test/mock';
 import { createInstantSearchTestWrapper } from '../../../../../test/utils';
 import { useSearchResults } from '../useSearchResults';
 
@@ -49,4 +53,34 @@ describe('useSearchResults', () => {
     });
     expect(result.current.results.__isArtificial).toBeUndefined();
   });
+
+  test('does not return `null` results when the first search is stalled', async () => {
+    const wrapper = createInstantSearchTestWrapper({
+      stalledSearchDelay: 0,
+      searchClient: createSearchClient({
+        search: async () => {
+          // Simulate a stalled search
+          await new Promise((resolve) => setTimeout(resolve, 50));
+
+          return createMultiSearchResponse();
+        },
+      }),
+    });
+    const { result, waitForNextUpdate } = renderHook(() => useSearchResults(), {
+      wrapper: ({ children }) =>
+        wrapper({
+          children: (
+            <>
+              <SearchBox />
+              {children}
+            </>
+          ),
+        }),
+    });
+
+    await waitForNextUpdate();
+
+    // Update caused by <SearchBox>
+    expect(result.current.results).not.toBeNull();
+  });
 });

packages/react-instantsearch-hooks/src/lib/useSearchResults.ts

@@ -21,10 +21,17 @@ export function useSearchResults(): SearchResultsApi {
 
   useEffect(() => {
     function handleRender() {
-      setSearchResults({
-        results: searchIndex.getResults()!, // Results can't be `null` after the first render.
-        scopedResults: searchIndex.getScopedResults(),
-      });
+      const results = searchIndex.getResults();
+
+      // Results can be `null` when the first search is stalled.
+      // In this case, we skip the update.
+      // See: https://github.com/algolia/instantsearch.js/blob/20996c7a159988c58e00ff24d2d2dc98af8b980f/src/widgets/index/index.ts#L652-L657
+      if (results !== null) {
+        setSearchResults({
+          results,
+          scopedResults: searchIndex.getScopedResults(),
+        });
+      }
     }
 
     search.addListener('render', handleRender);