wrap DropdownItem itemData usages with useMemo

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   ignorePatterns: ['lib', 'tests/setup/responses', 'storybook-static', '!.storybook'],
   overrides: [
     {
-      files: ['**/*.test.*'],
+      files: ['**/*.{test,stories}.*'],
       rules: {
         'react-perf/jsx-no-new-array-as-prop': 'off',
         'react-perf/jsx-no-new-function-as-prop': 'off',

src/components/FilterSearch.tsx

@@ -1,5 +1,5 @@
 import { AutocompleteResult, Filter, FilterSearchResponse, SearchParameterField, useAnswersActions } from '@yext/answers-headless-react';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { CompositionMethod, useComposedCssClasses } from '../hooks/useComposedCssClasses';
 import { useSynchronizedRequest } from '../hooks/useSynchronizedRequest';
 import { executeSearch } from '../utils';
@@ -84,7 +84,10 @@ export function FilterSearch({
     inputValue => answersActions.executeFilterSearch(inputValue ?? '', sectioned, searchParamFields),
     (e) => console.error('Error occured executing a filter search request.\n', e)
   );
-  const sections = filterSearchResponse?.sections.filter(section => section.results.length > 0) ?? [];
+  const sections = useMemo(() => {
+    return filterSearchResponse?.sections.filter(section => section.results.length > 0) ?? [];
+  }, [filterSearchResponse?.sections]);
+
   const hasResults = sections.flatMap(s => s.results).length > 0;
 
   const handleSelectDropdown = useCallback((_value, _index, itemData) => {
@@ -100,6 +103,15 @@ export function FilterSearch({
   const handleChangeDropdownInput = useCallback(query => executeFilterSearch(query), [executeFilterSearch]);
   const meetsSubmitCritera = useCallback(index => index >= 0, []);
 
+  const itemDataMatrix = useMemo(() => {
+    return sections.map(section => {
+      return section.results.map(result => ({
+        filter: result.filter,
+        displayName: result.value
+      }));
+    });
+  }, [sections]);
+
   function renderDropdownItems() {
     return sections.map((section, sectionIndex) => {
       return (
@@ -115,7 +127,7 @@ export function FilterSearch({
                 key={index}
                 focusedClassName={cssClasses.focusedOption}
                 value={result.value}
-                itemData={{ filter: result.filter, displayName: result.value }}
+                itemData={itemDataMatrix[sectionIndex][index]}
               >
                 {renderAutocompleteResult(result, cssClasses)}
               </DropdownItem>
@@ -162,18 +174,19 @@ function getScreenReaderText(sections: {
     pluralForm: '0 autocomplete options found.',
     count: 0
   });
-  if (sections.length > 0) {
-    const screenReaderPhrases = sections.map(section => {
-      const optionInfo = section.label
-        ? `${section.results.length} ${section.label}`
-        : `${section.results.length}`;
-      return processTranslation({
-        phrase: `${optionInfo} autocomplete option found.`,
-        pluralForm: `${optionInfo} autocomplete options found.`,
-        count: section.results.length
-      });
-    });
-    screenReaderText = screenReaderPhrases.join(' ');
+  if (sections.length === 0) {
+    return screenReaderText;
   }
+  const screenReaderPhrases = sections.map(section => {
+    const optionInfo = section.label
+      ? `${section.results.length} ${section.label}`
+      : `${section.results.length}`;
+    return processTranslation({
+      phrase: `${optionInfo} autocomplete option found.`,
+      pluralForm: `${optionInfo} autocomplete options found.`,
+      count: section.results.length
+    });
+  });
+  screenReaderText = screenReaderPhrases.join(' ');
   return screenReaderText;
 }

src/components/SearchBar.tsx

@@ -41,6 +41,7 @@ import { useSearchBarAnalytics } from '../hooks/useSearchBarAnalytics';
 import { isVerticalLink, VerticalLink } from '../models/verticalLink';
 import { executeAutocomplete as executeAutocompleteSearch } from '../utils/search-operations';
 import { clearStaticRangeFilters } from '../utils/filterutils';
+import { useMemo } from 'react';
 
 const builtInCssClasses: SearchBarCssClasses = {
   container: 'h-12 mb-6',
@@ -312,6 +313,14 @@ export function SearchBar({
     ));
   }
 
+  const itemDataMatrix = useMemo(() => {
+    return autocompleteResponse?.results.map(result => {
+      return result.verticalKeys?.map(verticalKey => ({
+        verticalLink: { verticalKey, query: result.value }
+      })) ?? [];
+    }) ?? [];
+  }, [autocompleteResponse?.results]);
+
   function renderQuerySuggestions() {
     return autocompleteResponse?.results.map((result, i) => (
       <Fragment key={i}>
@@ -334,7 +343,7 @@ export function SearchBar({
             className={cssClasses.optionContainer}
             focusedClassName={classNames(cssClasses.optionContainer, cssClasses.focusedOption)}
             value={result.value}
-            itemData={{ verticalLink: { verticalKey, query: result.value } }}
+            itemData={itemDataMatrix[i][j]}
             onClick={handleSubmit}
           >
             {renderAutocompleteResult(

tests/__fixtures__/core/AnswersCore.ts

@@ -29,7 +29,7 @@ export class AnswersCore {
   searchService: SearchService;
   questionSubmissionService: QuestionSubmissionService;
   autoCompleteService: AutocompleteService;
-  
+
   constructor() {
     this.searchService = mockedSearchService;
     this.questionSubmissionService = mockedQuestionSubmissionService;
@@ -79,5 +79,5 @@ export function AnswersCoreDecorator(story, { parameters }) {
       mockedAutoCompleteService = services.autoCompleteService;
     }
   }
-  return story();  
+  return story();
 }