tmp: add log points on useConnector related renders

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

@@ -553,6 +553,10 @@ See documentation: ${createDocumentationLink({
 
     mainHelper.search = () => {
       this.status = 'loading';
+      console.log(
+        '\x1b[34m%s\x1b[0m',
+        'InstantSearch:mainHelper.search() > scheduling render'
+      );
       this.scheduleRender(false);
 
       warning(
@@ -616,6 +620,10 @@ See documentation: ${createDocumentationLink({
       (error as any).error = error;
       this.error = error;
       this.status = 'error';
+      console.log(
+        '\x1b[34m%s\x1b[0m',
+        'InstantSearch:mainHelper.on(error) > scheduling render'
+      );
       this.scheduleRender(false);
 
       // This needs to execute last because it throws the error.
@@ -660,6 +668,10 @@ See documentation: ${createDocumentationLink({
     // Later, we could also skip `index()` widgets and widgets that don't read
     // the results, but this is an optimization that has a very low impact for now.
     else if (this.mainIndex.getWidgets().length > 0) {
+      console.log(
+        '\x1b[32m%s\x1b[0m',
+        'InstantSearch:start() > scheduling search'
+      );
       this.scheduleSearch();
     }
 
@@ -727,12 +739,20 @@ See documentation: ${createDocumentationLink({
   }
 
   public scheduleSearch = defer(() => {
+    console.log(
+      '\x1b[32m%s\x1b[0m',
+      'InstantSearch:scheduleSearch() > calling main helper search'
+    );
     if (this.started) {
       this.mainHelper!.search();
     }
   });
 
   public scheduleRender = defer((shouldResetStatus: boolean = true) => {
+    console.log(
+      '\x1b[34m%s\x1b[0m',
+      'InstantSearch:scheduleRender() > render index and emit render event'
+    );
     if (!this.mainHelper?.hasPendingRequests()) {
       clearTimeout(this._searchStalledTimer);
       this._searchStalledTimer = null;
@@ -754,6 +774,10 @@ See documentation: ${createDocumentationLink({
     if (!this._searchStalledTimer) {
       this._searchStalledTimer = setTimeout(() => {
         this.status = 'stalled';
+        console.log(
+          '\x1b[34m%s\x1b[0m',
+          'InstantSearch:scheduleStalledRender() > scheduling render'
+        );
         this.scheduleRender();
       }, this._stalledSearchDelay);
     }
@@ -793,13 +817,21 @@ See documentation: ${createDocumentationLink({
             this.mainIndex
           );
 
+          console.log(
+            '\x1b[32m%s\x1b[0m',
+            'InstantSearch:setUiState() > scheduling search'
+          );
           this.scheduleSearch();
           this.onInternalStateChange();
         },
       });
     } else {
       setIndexHelperState(nextUiState, this.mainIndex);
 
+      console.log(
+        '\x1b[32m%s\x1b[0m',
+        'InstantSearch:setUiState() > scheduling search'
+      );
       this.scheduleSearch();
       this.onInternalStateChange();
     }

packages/instantsearch.js/src/middlewares/createInsightsMiddleware.ts

@@ -199,6 +199,10 @@ export function createInsightsMiddleware<
         }
 
         if (!$$internal) {
+          console.log(
+            '\x1b[32m%s\x1b[0m',
+            'Insights:started() > scheduling search'
+          );
           instantSearchInstance.scheduleSearch();
         }
 
@@ -220,6 +224,10 @@ export function createInsightsMiddleware<
             });
 
             if (existingToken && existingToken !== userToken) {
+              console.log(
+                '\x1b[32m%s\x1b[0m',
+                'Insights:setUserTokenToSearch() > scheduling search'
+              );
               instantSearchInstance.scheduleSearch();
             }
           }
@@ -328,6 +336,10 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
             ...initialParameters,
           });
 
+          console.log(
+            '\x1b[32m%s\x1b[0m',
+            'Insights:unsubscribe() > scheduling search'
+          );
           instantSearchInstance.scheduleSearch();
         }
       },

packages/instantsearch.js/src/middlewares/createRouterMiddleware.ts

@@ -104,6 +104,10 @@ export const createRouterMiddleware = <
 
         router.onUpdate((route) => {
           if (instantSearchInstance.mainIndex.getWidgets().length > 0) {
+            console.log(
+              '\x1b[33m%s\x1b[0m',
+              'Router:onUpdate() > call setUiState()'
+            );
             instantSearchInstance.setUiState(stateMapping.routeToState(route));
           }
         });

packages/instantsearch.js/src/widgets/index/index.ts

@@ -365,6 +365,10 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
           }
         });
 
+        console.log(
+          '\x1b[32m%s\x1b[0m',
+          'Index:addWidgets() > scheduling search'
+        );
         localInstantSearchInstance.scheduleSearch();
       }
 
@@ -426,6 +430,10 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         helper!.setState(newState);
 
         if (localWidgets.length) {
+          console.log(
+            '\x1b[32m%s\x1b[0m',
+            'Index:removeWidgets() > scheduling search'
+          );
           localInstantSearchInstance.scheduleSearch();
         }
       }
@@ -552,6 +560,10 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         // The index does not render the results it schedules a new render
         // to let all the other indices emit their own results. It allows us to
         // run the render process in one pass.
+        console.log(
+          '\x1b[34m%s\x1b[0m',
+          'Index:derivedHelper.on(result) > scheduling render'
+        );
         instantSearchInstance.scheduleRender();
 
         // the derived helper is the one which actually searches, but the helper
@@ -624,6 +636,10 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         // If there are initial results, we're not notified of the next results
         // because we don't trigger an initial search. We therefore need to directly
         // schedule a render that will render the results injected on the helper.
+        console.log(
+          '\x1b[34m%s\x1b[0m',
+          'Index:init() > scheduling render due to indexInitialResults'
+        );
         instantSearchInstance.scheduleRender();
       }
     },
@@ -660,6 +676,8 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         }
       });
 
+      // eslint-disable-next-line no-console
+      console.groupCollapsed('Index:render()');
       widgetsToRender.forEach((widget) => {
         // At this point, all the variables used below are set. Both `helper`
         // and `derivedHelper` have been created at the `init` step. The attribute
@@ -672,6 +690,8 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
           widget.render(createRenderArgs(instantSearchInstance, this));
         }
       });
+      // eslint-disable-next-line no-console
+      console.groupEnd();
     },
 
     dispose() {

packages/react-instantsearch-core/src/hooks/useConnector.ts

@@ -77,6 +77,11 @@ export function useConnector<
             ) ||
             instantSearchInstance.status !== previousStatusRef.current
           ) {
+            // eslint-disable-next-line no-console
+            console.log(`useConnector(${connector.name}) > setState`, {
+              prev: previousRenderStateRef.current,
+              next: renderState,
+            });
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             setState(renderState);
             previousRenderStateRef.current = renderState;

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

@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
+import { dequal } from './dequal';
 import { getIndexSearchResults } from './getIndexSearchResults';
 import { useIndexContext } from './useIndexContext';
 import { useInstantSearchContext } from './useInstantSearchContext';
@@ -18,18 +19,26 @@ export function useSearchResults(): SearchResultsApi {
   const [searchResults, setSearchResults] = useState(() =>
     getIndexSearchResults(searchIndex)
   );
+  const _scopedResultsRef = useRef(searchResults.scopedResults);
 
   useEffect(() => {
     function handleRender() {
       const results = searchIndex.getResults();
+      const scopedResults = searchIndex.getScopedResults();
 
       // Results can be `null` when the first search is stalled.
       // In this case, we skip the update.
       // See: https://github.com/algolia/instantsearch/blob/20996c7a159988c58e00ff24d2d2dc98af8b980f/src/widgets/index/index.ts#L652-L657
-      if (results !== null) {
+      console.log('useSearchResults() > handleRender()');
+      if (
+        results !== null &&
+        !dequal(scopedResults, _scopedResultsRef.current)
+      ) {
+        console.log('-- useSearchResults() > handleRender() > setState()');
+        _scopedResultsRef.current = scopedResults;
         setSearchResults({
           results,
-          scopedResults: searchIndex.getScopedResults(),
+          scopedResults,
         });
       }
     }

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

@@ -4,6 +4,7 @@ import { useIndexContext } from './useIndexContext';
 import { useInstantSearchContext } from './useInstantSearchContext';
 
 import type { InstantSearch, UiState, IndexWidget } from 'instantsearch.js';
+import { dequal } from './dequal';
 
 export type SearchStateApi<TUiState extends UiState> = {
   uiState: TUiState;
@@ -27,6 +28,7 @@ export function useSearchState<
 
   const setUiState = useCallback<SearchStateApi<TUiState>['setUiState']>(
     (nextUiState) => {
+      console.log('\x1b[33m%s\x1b[0m', 'useSearchState > call setUiState()');
       search.setUiState(nextUiState);
     },
     [search]
@@ -42,8 +44,12 @@ export function useSearchState<
 
   useEffect(() => {
     function handleRender() {
-      setLocalUiState(search.getUiState());
-      setRenderState(search.renderState);
+      console.log('useSearchState() > handleRender()');
+      if (!dequal(search.renderState, renderState)) {
+        console.log('-- useSearchState() > handleRender() > setState()');
+        setLocalUiState(search.getUiState());
+        setRenderState(search.renderState);
+      }
     }
 
     search.addListener('render', handleRender);