perf(useSearchResults): memoize search function (#2996)

shanpriyan · ovflowd · web-flow · commit 0399f2026545 · 2022-11-10T11:04:57.000+01:00
Perf(useSearchResults): memoize search function

Co-authored-by: Claudio Wunder &lt;cwunder@gnome.org&gt;
diff --git a/src/hooks/useSearchResults.ts b/src/hooks/useSearchResults.ts
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import { Index, SerialisedIndexData } from 'elasticlunr';
 import { compareTwoStrings } from 'string-similarity';
@@ -22,34 +22,38 @@ export const useSearchResults = () => {
     [resultData]
   );
 
-  return (currentQuery: string) => {
-    const currentResults = storeIndex
-      .search(currentQuery, { expand: true })
-      .map(({ ref }) => storeIndex.documentStore.getDoc(ref) as SearchResult);
-
-    const mapResult = (result: SearchResult) => {
-      if (result.tableOfContents) {
-        const tableArray = result.tableOfContents.split('\n');
-
-        const uniqueItems = new Set(
-          tableArray
-            .map(replaceDataTagFromString)
-            .filter(item => compareTwoStrings(currentQuery, item) > 0.3)
-        );
-
-        return [...uniqueItems].map(item => ({
-          title: result.title,
-          displayTitle: item.replace(/(`|\(.*\))/g, ''),
-          id: `${result.id}-${createSlug(item)}`,
-          slug: `${result.slug}#${createSlug(item)}`,
-          category: result.category,
-          wrapInCode: item.startsWith('`'),
-        }));
-      }
-
-      return result;
-    };
-
-    return currentResults.slice(0, 20).map(mapResult).flat().slice(0, 20);
-  };
+  const searchResults = useCallback(
+    (currentQuery: string) => {
+      const currentResults = storeIndex
+        .search(currentQuery, { expand: true })
+        .map(({ ref }) => storeIndex.documentStore.getDoc(ref) as SearchResult);
+
+      const mapResult = (result: SearchResult) => {
+        if (result.tableOfContents) {
+          const tableArray = result.tableOfContents.split('\n');
+
+          const uniqueItems = new Set(
+            tableArray
+              .map(replaceDataTagFromString)
+              .filter(item => compareTwoStrings(currentQuery, item) > 0.3)
+          );
+
+          return [...uniqueItems].map(item => ({
+            title: result.title,
+            displayTitle: item.replace(/(`|\(.*\))/g, ''),
+            id: `${result.id}-${createSlug(item)}`,
+            slug: `${result.slug}#${createSlug(item)}`,
+            category: result.category,
+            wrapInCode: item.startsWith('`'),
+          }));
+        }
+
+        return result;
+      };
+
+      return currentResults.slice(0, 20).map(mapResult).flat().slice(0, 20);
+    },
+    [storeIndex]
+  );
+  return searchResults;
 };
