feat(server): reset scheduleSearch only after all components mount (#6650)

* wip: reset search scheduler based on callback

* less api

* better description

* comment

* chore

* test correctly, we are server rendering

because we're in ssr, there's no notion of eg useEffect and we also don't search twice

Author: Haroenv

packages/instantsearch.js/src/lib/InstantSearch.ts

@@ -229,6 +229,8 @@ class InstantSearch<
   public _searchStalledTimer: any;
   public _initialUiState: TUiState;
   public _initialResults: InitialResults | null;
+  public _manuallyResetScheduleSearch: boolean = false;
+  public _resetScheduleSearch?: () => void;
   public _createURL: CreateURL<TUiState>;
   public _searchFunction?: InstantSearchOptions['searchFunction'];
   public _mainHelperSearch?: AlgoliaSearchHelper['search'];
@@ -700,14 +702,25 @@ See documentation: ${createDocumentationLink({
       // because we already have the results to render. This skips the initial
       // network request on the browser on `start`.
       this.scheduleSearch = defer(noop);
-      // We also skip the initial network request when widgets are dynamically
-      // added in the first tick (that's the case in all the framework-based flavors).
-      // When we add a widget to `index`, it calls `scheduleSearch`. We can rely
-      // on our `defer` util to restore the original `scheduleSearch` value once
-      // widgets are added to hook back to the regular lifecycle.
-      defer(() => {
-        this.scheduleSearch = originalScheduleSearch;
-      })();
+      if (this._manuallyResetScheduleSearch) {
+        // If `_manuallyResetScheduleSearch` is passed, it means that we don't
+        // want to rely on a single `defer` to reset the `scheduleSearch`.
+        // Instead, the consumer will call `_resetScheduleSearch` to restore
+        // the original `scheduleSearch` function.
+        // This happens in the React flavour after rendering.
+        this._resetScheduleSearch = () => {
+          this.scheduleSearch = originalScheduleSearch;
+        };
+      } else {
+        // We also skip the initial network request when widgets are dynamically
+        // added in the first tick (that's the case in all the framework-based flavors).
+        // When we add a widget to `index`, it calls `scheduleSearch`. We can rely
+        // on our `defer` util to restore the original `scheduleSearch` value once
+        // widgets are added to hook back to the regular lifecycle.
+        defer(() => {
+          this.scheduleSearch = originalScheduleSearch;
+        })();
+      }
     }
     // We only schedule a search when widgets have been added before `start()`
     // because there are listeners that can use these results.

packages/instantsearch.js/test/createInstantSearch.ts

@@ -46,6 +46,7 @@ export const createInstantSearch = (
     _insights: undefined,
     _hasRecommendWidget: false,
     _hasSearchWidget: false,
+    _manuallyResetScheduleSearch: false,
     onStateChange: null,
     setUiState: jest.fn(),
     getUiState: jest.fn(() => ({})),

packages/react-instantsearch-core/src/components/InstantSearch.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { IndexContext } from '../lib/IndexContext';
 import { InstantSearchContext } from '../lib/InstantSearchContext';
 import { useInstantSearchApi } from '../lib/useInstantSearchApi';
 
-import type { UseInstantSearchApiProps } from '../lib/useInstantSearchApi';
+import type {
+  InternalInstantSearch,
+  UseInstantSearchApiProps,
+} from '../lib/useInstantSearchApi';
 import type {
   InstantSearch as InstantSearchType,
   UiState,
@@ -33,7 +36,24 @@ export function InstantSearch<
     >
       <IndexContext.Provider value={search.mainIndex}>
         {children}
+        <ResetScheduleSearch
+          search={search as unknown as InternalInstantSearch<UiState, UiState>}
+        />
       </IndexContext.Provider>
     </InstantSearchContext.Provider>
   );
 }
+
+function ResetScheduleSearch({
+  search,
+}: {
+  search: InternalInstantSearch<UiState, UiState>;
+}) {
+  useEffect(() => {
+    if (search._resetScheduleSearch) {
+      search._resetScheduleSearch();
+    }
+  }, [search]);
+
+  return null;
+}

packages/react-instantsearch-core/src/lib/useInstantSearchApi.ts

@@ -108,6 +108,10 @@ export function useInstantSearchApi<TUiState extends UiState, TRouteState>(
       // an additional network request. (This is equivalent to monkey-patching
       // `scheduleSearch` to a noop.)
       search._initialResults = initialResults || {};
+      // We don't rely on the `defer` to reset the schedule search, but will call
+      // `search._resetScheduleSearch()` manually in the effect after children
+      // mount in `InstantSearch`.
+      search._manuallyResetScheduleSearch = true;
     }
 
     addAlgoliaAgents(props.searchClient, [

packages/react-instantsearch-nextjs/src/__tests__/InitializePromise.test.tsx

@@ -6,10 +6,10 @@ import {
   createSearchClient,
   createSingleSearchResponse,
 } from '@instantsearch/mocks';
-import { act, render } from '@testing-library/react';
 import * as utils from 'instantsearch.js/es/lib/utils';
 import { ServerInsertedHTMLContext } from 'next/navigation';
 import React from 'react';
+import { renderToString } from 'react-dom/server';
 import { SearchBox, TrendingItems } from 'react-instantsearch';
 import {
   InstantSearch,
@@ -27,7 +27,7 @@ jest.mock('instantsearch.js/es/lib/utils', () => ({
   resetWidgetId: jest.fn(),
 }));
 
-const renderComponent = ({
+const renderComponent = async ({
   children,
   ref = { current: null },
   nonce,
@@ -44,7 +44,7 @@ const renderComponent = ({
     }),
   });
 
-  render(
+  renderToString(
     <InstantSearchRSCContext.Provider value={ref}>
       <InstantSearchSSRProvider>
         <InstantSearch searchClient={client} indexName="indexName">
@@ -60,6 +60,8 @@ const renderComponent = ({
     </InstantSearchRSCContext.Provider>
   );
 
+  await ref.current;
+
   return client;
 };
 
@@ -70,19 +72,13 @@ test('it calls resetWidgetId', () => {
 });
 
 test('it applies provided nonce on the injected script tag', async () => {
-  const ref: { current: PromiseWithState<void> | null } = { current: null };
   const insertedHTML = jest.fn();
-  renderComponent({
-    ref,
+  await renderComponent({
     children: <SearchBox />,
     nonce: 'csp-nonce',
     insertedHTML,
   });
 
-  await act(async () => {
-    await ref.current;
-  });
-
   expect(insertedHTML).toHaveBeenLastCalledWith(
     expect.objectContaining({
       props: expect.objectContaining({
@@ -95,7 +91,7 @@ test('it applies provided nonce on the injected script tag', async () => {
 test('it waits for both search and recommend results', async () => {
   const ref: { current: PromiseWithState<void> | null } = { current: null };
 
-  const client = renderComponent({
+  const client = await renderComponent({
     ref,
     children: (
       <>
@@ -105,10 +101,6 @@ test('it waits for both search and recommend results', async () => {
     ),
   });
 
-  await act(async () => {
-    await ref.current;
-  });
-
   expect(ref.current!.status).toBe('fulfilled');
   expect(client.search).toHaveBeenCalledTimes(1);
   expect(client.getRecommendations).toHaveBeenCalledTimes(1);
@@ -117,7 +109,7 @@ test('it waits for both search and recommend results', async () => {
 test('it waits for search only if there are only search widgets', async () => {
   const ref: { current: PromiseWithState<void> | null } = { current: null };
 
-  const client = renderComponent({
+  const client = await renderComponent({
     ref,
     children: (
       <>
@@ -126,10 +118,6 @@ test('it waits for search only if there are only search widgets', async () => {
     ),
   });
 
-  await act(async () => {
-    await ref.current;
-  });
-
   expect(ref.current!.status).toBe('fulfilled');
   expect(client.search).toHaveBeenCalledTimes(1);
   expect(client.search).toHaveBeenNthCalledWith(1, [
@@ -141,7 +129,7 @@ test('it waits for search only if there are only search widgets', async () => {
 test('it waits for recommend only if there are only recommend widgets', async () => {
   const ref: { current: PromiseWithState<void> | null } = { current: null };
 
-  const client = renderComponent({
+  const client = await renderComponent({
     ref,
     children: (
       <>
@@ -150,10 +138,6 @@ test('it waits for recommend only if there are only recommend widgets', async ()
     ),
   });
 
-  await act(async () => {
-    await ref.current;
-  });
-
   expect(ref.current!.status).toBe('fulfilled');
   expect(client.search).not.toHaveBeenCalled();
   expect(client.getRecommendations).toHaveBeenCalledTimes(1);