Investigating search results infinite re-rendering

packages/gitbook/src/app/(site)/fetch.ts

@@ -24,6 +24,7 @@ export interface PageIdParams {
  */
 export async function fetchContentData() {
     const content = await getSiteContentPointer();
+    console.log('fetchContentData', {content});
 
     const [{ space, contentTarget, pages }, { customization, site, sections, spaces, scripts }] =
         await Promise.all([

packages/gitbook/src/components/Search/SearchResults.tsx

@@ -54,33 +54,37 @@ export const SearchResults = React.forwardRef(function SearchResults(
 
     const language = useLanguage();
     const trackEvent = useTrackEvent();
-    const [resultsState, setResultsState] = React.useState<{
-        results: ResultType[];
-        fetching: boolean;
-    }>({ results: [], fetching: true });
+
+    const debounceTimeout = React.useRef<Timer | null>(null);
+    const [results, setResults] = React.useState<ResultType[]>([]);
+    const [isLoading, setIsLoading] = React.useState(false);
+
     const [cursor, setCursor] = React.useState<number | null>(null);
     const refs = React.useRef<(null | HTMLAnchorElement)[]>([]);
     const suggestedQuestionsRef = React.useRef<null | ResultType[]>(null);
 
     React.useEffect(() => {
+        setIsLoading(true);
+
         if (!query) {
             if (!withAsk) {
-                setResultsState({ results: [], fetching: false });
+                setIsLoading(false);
                 return;
             }
 
             if (suggestedQuestionsRef.current) {
-                setResultsState({ results: suggestedQuestionsRef.current, fetching: false });
+                setResults(suggestedQuestionsRef.current);
+                setIsLoading(false);
                 return;
             }
 
             let cancelled = false;
 
-            setResultsState({ results: [], fetching: true });
             getRecommendedQuestions(spaceId).then((questions) => {
                 if (!questions) {
                     if (!cancelled) {
-                        setResultsState({ results: [], fetching: false });
+                        setResults([]);
+                        setIsLoading(false);
                     }
                     captureException(
                         new Error(`corrupt-cache: getRecommendedQuestions is ${questions}`),
@@ -97,39 +101,48 @@ export const SearchResults = React.forwardRef(function SearchResults(
                 suggestedQuestionsRef.current = results;
 
                 if (cancelled) {
+                    setIsLoading(false);
                     return;
                 }
 
-                setResultsState({ results, fetching: false });
+                setResults(results);
+                setIsLoading(false);
             });
 
             return () => {
                 cancelled = true;
             };
         } else {
-            setResultsState((prev) => ({ results: prev.results, fetching: true }));
+            if (withAsk) {
+                setResults((prev) => withQuestionResult(prev, query));
+                setIsLoading(false);
+            }
+
             let cancelled = false;
-            const timeout = setTimeout(async () => {
-                const results = await (global
+
+            debounceTimeout.current = setTimeout(async () => {
+                const fetchedResults = await (global
                     ? searchAllSiteContent(query, pointer)
                     : searchSiteSpaceContent(query, pointer, revisionId));
 
                 if (cancelled) {
                     return;
                 }
 
-                if (!results) {
+                if (!fetchedResults) {
                     captureException(
                         new Error(
-                            `corrupt-cache: ${global ? 'searchAllSiteContent' : 'searchSiteSpaceContent'} is ${results}`,
+                            `corrupt-cache: ${global ? 'searchAllSiteContent' : 'searchSiteSpaceContent'} is ${fetchedResults}`,
                         ),
-                        { extra: { results } },
+                        { extra: { results: fetchedResults } },
                     );
-                    setResultsState({ results: [], fetching: false });
+                    setResults([]);
+                    setIsLoading(false);
                     return;
                 }
 
-                setResultsState({ results, fetching: false });
+                setResults(withAsk ? withQuestionResult(fetchedResults, query) : fetchedResults);
+                setIsLoading(false);
 
                 trackEvent({
                     type: 'search_type_query',
@@ -139,18 +152,15 @@ export const SearchResults = React.forwardRef(function SearchResults(
 
             return () => {
                 cancelled = true;
-                clearTimeout(timeout);
+
+                if (debounceTimeout.current) {
+                    clearTimeout(debounceTimeout.current);
+                    debounceTimeout.current = null;
+                }
             };
         }
     }, [query, global, pointer, spaceId, revisionId, withAsk, trackEvent]);
 
-    const results: ResultType[] = React.useMemo(() => {
-        if (!withAsk) {
-            return resultsState.results;
-        }
-        return withQuestionResult(resultsState.results, query);
-    }, [resultsState.results, query, withAsk]);
-
     React.useEffect(() => {
         if (!query) {
             // Reset the cursor when there's no query
@@ -208,7 +218,7 @@ export const SearchResults = React.forwardRef(function SearchResults(
         [moveBy, select],
     );
 
-    if (resultsState.fetching) {
+    if (isLoading) {
         return (
             <div className={tcls('flex', 'items-center', 'justify-center', 'py-8')}>
                 <Loading className={tcls('w-6', 'text-primary')} />