diff --git a/src/hooks/useSearchResults.ts b/src/hooks/useSearchResults.ts index 0315b175fa..d8606a62a7 100644 --- 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; };