Don't rerender JobCategorySuggest on no-op props (#656)

* Don't rerender `JobCategorySuggest` on no-op props

This avoids re-querying the SEEK API and re-displaying suggestions
unless there's a meaningful change to our props.

* Switch to `react-fast-compare`

* Use caret range

.changeset/neat-bats-own.md

@@ -0,0 +1,7 @@
+---
+'wingman-fe': patch
+---
+
+**JobCategorySuggest:** Don't rerender on no-op props changes
+
+This avoids re-querying the SEEK API and re-displaying suggestions unless there's a meaningful change to our props.

fe/lib/components/JobCategorySuggest/JobCategorySuggest.tsx

@@ -7,6 +7,7 @@ import {
   Text,
 } from 'braid-design-system';
 import React, { ComponentPropsWithRef, forwardRef, useEffect } from 'react';
+import isDeepEqual from 'react-fast-compare';
 import { useDebounce } from 'use-debounce';
 
 import type {
@@ -33,97 +34,99 @@ export interface JobCategorySuggestProps
   initialValue?: string;
 }
 
-export const JobCategorySuggest = forwardRef<
-  HTMLInputElement,
-  JobCategorySuggestProps
->(
-  (
-    {
-      client,
-      debounceDelay = 250,
-      onSelect,
-      positionProfile,
-      schemeId,
-      showConfidence,
-      initialValue,
+export const JobCategorySuggest = React.memo(
+  forwardRef<HTMLInputElement, JobCategorySuggestProps>(
+    (
+      {
+        client,
+        debounceDelay = 250,
+        onSelect,
+        positionProfile,
+        schemeId,
+        showConfidence,
+        initialValue,
 
-      message,
-      name,
-      reserveMessageSpace,
-      tone,
+        message,
+        name,
+        reserveMessageSpace,
+        tone,
 
-      ...restProps
-    },
-    forwardedRef,
-  ) => {
-    const [
-      getCategorySuggestion,
-      { data: suggestData, error: suggestError, loading: suggestLoading },
-    ] = useLazyQuery<JobCategorySuggestQuery>(JOB_CATEGORY_SUGGEST, {
-      client,
-      // Avoid polluting the Apollo cache with partial searches
-      fetchPolicy: 'no-cache',
-    });
+        ...restProps
+      },
+      forwardedRef,
+    ) => {
+      const [
+        getCategorySuggestion,
+        { data: suggestData, error: suggestError, loading: suggestLoading },
+      ] = useLazyQuery<JobCategorySuggestQuery>(JOB_CATEGORY_SUGGEST, {
+        client,
+        // Avoid polluting the Apollo cache with partial searches
+        fetchPolicy: 'no-cache',
+      });
+
+      const [debounceJobCategorySuggestInput] = useDebounce(
+        positionProfile,
+        debounceDelay,
+      );
 
-    const [debounceJobCategorySuggestInput] = useDebounce(
-      positionProfile,
-      debounceDelay,
-    );
+      useEffect(() => {
+        if (debounceJobCategorySuggestInput) {
+          getCategorySuggestion({
+            variables: {
+              positionProfile: debounceJobCategorySuggestInput,
+              schemeId,
+              first: 5,
+            },
+          });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [schemeId, debounceJobCategorySuggestInput]);
 
-    useEffect(() => {
-      if (debounceJobCategorySuggestInput) {
-        getCategorySuggestion({
-          variables: {
-            positionProfile: debounceJobCategorySuggestInput,
-            schemeId,
-            first: 5,
-          },
-        });
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [schemeId, debounceJobCategorySuggestInput]);
+      return (
+        <Stack space="small">
+          {suggestLoading ? (
+            <Stack space="medium">
+              <Text>Loading suggested categories</Text>
+              <Loader size="xsmall" />
+            </Stack>
+          ) : (
+            suggestData?.jobCategorySuggestions && (
+              <JobCategorySuggestChoices
+                {...restProps}
+                choices={suggestData.jobCategorySuggestions}
+                name={name}
+                ref={forwardedRef}
+                initialValue={initialValue}
+                onSelect={onSelect}
+                showConfidence={showConfidence}
+                tone={tone}
+                client={client}
+                schemeId={schemeId}
+              />
+            )
+          )}
 
-    return (
-      <Stack space="small">
-        {suggestLoading ? (
-          <Stack space="medium">
-            <Text>Loading suggested categories</Text>
-            <Loader size="xsmall" />
-          </Stack>
-        ) : (
-          suggestData?.jobCategorySuggestions && (
-            <JobCategorySuggestChoices
-              {...restProps}
-              choices={suggestData.jobCategorySuggestions}
-              name={name}
-              ref={forwardedRef}
-              initialValue={initialValue}
-              onSelect={onSelect}
-              showConfidence={showConfidence}
+          {message || reserveMessageSpace ? (
+            <FieldMessage
+              id="jobCategorySuggestMessage"
+              message={message}
+              reserveMessageSpace={
+                suggestError ? undefined : reserveMessageSpace
+              }
               tone={tone}
-              client={client}
-              schemeId={schemeId}
             />
-          )
-        )}
-
-        {message || reserveMessageSpace ? (
-          <FieldMessage
-            id="jobCategorySuggestMessage"
-            message={message}
-            reserveMessageSpace={suggestError ? undefined : reserveMessageSpace}
-            tone={tone}
-          />
-        ) : null}
+          ) : null}
 
-        {suggestError && (
-          <FieldMessage
-            id="jobCategorySuggestError"
-            message="Sorry, we couldn’t fetch category suggestions. Please try again."
-            tone="critical"
-          />
-        )}
-      </Stack>
-    );
-  },
+          {suggestError && (
+            <FieldMessage
+              id="jobCategorySuggestError"
+              message="Sorry, we couldn’t fetch category suggestions. Please try again."
+              tone="critical"
+            />
+          )}
+        </Stack>
+      );
+    },
+  ),
+  isDeepEqual,
 );

fe/package.json

@@ -7,6 +7,7 @@
     "@graphql-tools/schema": "^8.1.2",
     "@types/uuid": "^8.3.1",
     "autosuggest-highlight": "^3.1.1",
+    "react-fast-compare": "^3.2.0",
     "react-hook-form": "^7.0.0",
     "runtypes": "^6.3.2",
     "use-debounce": "^7.0.0",