Only memoize objects/arrays from props

Author: mocca102

src/hooks/useCioAutocomplete.ts

@@ -4,12 +4,12 @@ import { useMemo, useState } from 'react';
 import useCioClient from './useCioClient';
 import useDownShift from './useDownShift';
 import {
-  CioAutocompleteProps,
   CioClientConfig,
   Section,
   UserDefinedSection,
   HTMLPropsWithCioDataAttributes,
   Item,
+  UseCioAutocompleteOptions,
 } from '../types';
 import usePrevious from './usePrevious';
 import {
@@ -23,7 +23,8 @@ import {
 import useConsoleErrors from './useConsoleErrors';
 import useSections from './useSections';
 import useRecommendationsObserver from './useRecommendationsObserver';
-import { isAutocompleteSection, isCustomSection, isRecommendationsSection } from '../typeGuards';
+import { isCustomSection, isRecommendationsSection } from '../typeGuards';
+import useNormalizedProps from './useNormalizedProps';
 
 export const defaultSections: UserDefinedSection[] = [
   {
@@ -36,65 +37,22 @@ export const defaultSections: UserDefinedSection[] = [
   },
 ];
 
-export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
-
-const convertLegacyParametersAndAddDefaults = (sections: UserDefinedSection[]) =>
-  sections.map((config) => {
-    if (isRecommendationsSection(config)) {
-      if (config.identifier && !config.podId) {
-        return { ...config, podId: config.identifier };
-      }
-
-      if (!config.indexSectionName) {
-        return { ...config, indexSectionName: 'Products' };
-      }
-    }
-
-    if (isAutocompleteSection(config)) {
-      if (config.identifier && !config.indexSectionName) {
-        return { ...config, indexSectionName: config.identifier };
-      }
-    }
-
-    return config;
-  });
-
 const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
+  const { sections, zeroStateSections, cioJsClientOptions, advancedParameters } =
+    useNormalizedProps(options);
   const {
     onSubmit,
     onChange,
     openOnFocus,
     apiKey,
     cioJsClient,
-    cioJsClientOptions,
     placeholder = 'What can we help you find today?',
     autocompleteClassName = 'cio-autocomplete',
-    advancedParameters,
     defaultInput,
     getSearchResultsUrl,
     onIsOpenChange,
   } = options;
 
-  let { sections = defaultSections, zeroStateSections } = options;
-
-  sections = useMemo(() => {
-    if (sections) {
-      return convertLegacyParametersAndAddDefaults(sections);
-    }
-
-    return sections;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(sections)]);
-
-  zeroStateSections = useMemo(() => {
-    if (zeroStateSections) {
-      return convertLegacyParametersAndAddDefaults(zeroStateSections);
-    }
-
-    return zeroStateSections;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(zeroStateSections)]);
-
   const [query, setQuery] = useState(defaultInput || '');
   const previousQuery = usePrevious(query);
   const cioClient = useCioClient({ apiKey, cioJsClient, cioJsClientOptions } as CioClientConfig);

src/hooks/useNormalizedProps.ts

@@ -0,0 +1,83 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useMemo } from 'react';
+import { UseCioAutocompleteOptions, UserDefinedSection } from '../types';
+import { isAutocompleteSection, isRecommendationsSection } from '../typeGuards';
+
+export const defaultSections: UserDefinedSection[] = [
+  {
+    indexSectionName: 'Search Suggestions',
+    type: 'autocomplete',
+  },
+  {
+    indexSectionName: 'Products',
+    type: 'autocomplete',
+  },
+];
+
+const convertLegacyParametersAndAddDefaults = (sections: UserDefinedSection[]) =>
+  sections.map((config) => {
+    if (isRecommendationsSection(config)) {
+      if (config.identifier && !config.podId) {
+        return { ...config, podId: config.identifier };
+      }
+
+      if (!config.indexSectionName) {
+        return { ...config, indexSectionName: 'Products' };
+      }
+    }
+
+    if (isAutocompleteSection(config)) {
+      if (config.identifier && !config.indexSectionName) {
+        return { ...config, indexSectionName: config.identifier };
+      }
+    }
+
+    return config;
+  });
+
+const normalizeSections = (sections: UserDefinedSection[] | undefined) => {
+  if (sections) {
+    return convertLegacyParametersAndAddDefaults(sections);
+  }
+
+  return sections;
+};
+
+// Normalize and Memoize Objects to prevent infinite rerenders if users pass object literals to useCioAutocomplete
+const useNormalizedProps = (options: UseCioAutocompleteOptions) => {
+  const {
+    sections = defaultSections,
+    zeroStateSections,
+    cioJsClientOptions,
+    advancedParameters,
+  } = options;
+
+  const sectionsMemoized = useMemo(
+    () => normalizeSections(sections),
+    [JSON.stringify(sections)]
+  ) as UserDefinedSection[];
+
+  const zeroStateSectionsMemoized = useMemo(
+    () => normalizeSections(zeroStateSections),
+    [JSON.stringify(zeroStateSections)]
+  );
+
+  const cioJsClientOptionsMemoized = useMemo(
+    () => cioJsClientOptions,
+    [JSON.stringify(cioJsClientOptions)]
+  );
+
+  const advancedParametersMemoized = useMemo(
+    () => advancedParameters,
+    [JSON.stringify(advancedParameters)]
+  );
+
+  return {
+    sections: sectionsMemoized,
+    zeroStateSections: zeroStateSectionsMemoized,
+    cioJsClientOptions: cioJsClientOptionsMemoized,
+    advancedParameters: advancedParametersMemoized,
+  };
+};
+
+export default useNormalizedProps;

src/types.ts

@@ -50,6 +50,8 @@ export type CioAutocompleteProps = CioClientConfig & {
   defaultInput?: string;
 };
 
+export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
+
 /**
  * AutocompleteSubmitEvent type is AutocompleteSelectSubmit or AutocompleteSearchSubmit.
  * Use isAutocompleteSearchSubmit or isAutocompleteSelectSubmit type predicates to safely access event properties.