Fix jobs detail navigation race

On slower connections, opening a job from a filtered jobs list could
bounce back to /jobs/. JobSearch was re-emitting debounced filter updates
on unrelated rerenders, and the jobs route treated those callbacks as
replace navigations even when search params were unchanged. That could
override an in-flight transition to /jobs/$jobId.

The filter parser result is now memoized in useFilterInput so
onFiltersChange is not retriggered when input text has not changed. The
jobs route now compares derived filter search params against current
params and skips navigation when the update is a no-op.

A regression test was added to JobSearch to ensure an unrelated rerender
does not notify the parent of filter changes.

Closes #495.

Author: bgentry

src/components/job-search/JobSearch.test.tsx

@@ -135,6 +135,26 @@ describe("JobSearch", () => {
         }),
       ]);
     });
+
+    it("does not notify parent on unrelated rerenders", async () => {
+      const onFiltersChange = vi.fn();
+      const { rerender } = render(
+        <JobSearch onFiltersChange={onFiltersChange} />,
+      );
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 250));
+      });
+      onFiltersChange.mockClear();
+
+      rerender(<JobSearch onFiltersChange={onFiltersChange} />);
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 250));
+      });
+
+      expect(onFiltersChange).not.toHaveBeenCalled();
+    });
   });
 
   describe("Suggestion System", () => {

src/components/job-search/hooks.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import {
   analyzeAutocompleteContext,
@@ -50,7 +50,10 @@ export function useFilterInput({
   } | null>(null);
 
   const debounceTimeoutRef = useRef<number | undefined>(undefined);
-  const currentFilters = parseFiltersFromText(inputValue);
+  const currentFilters = useMemo(
+    () => parseFiltersFromText(inputValue),
+    [inputValue],
+  );
 
   const {
     clearSuggestions,

src/routes/jobs/index.tsx

@@ -32,6 +32,14 @@ const minimumLimit = 20;
 const defaultLimit = 20;
 const maximumLimit = 200;
 
+const areStringArraysEqual = (a?: string[], b?: string[]) => {
+  if (a === b) return true;
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  return a.every((value, index) => value === b[index]);
+};
+
 export const Route = createFileRoute("/jobs/")({
   validateSearch: jobSearchSchema,
   // Strip default values from URLs and retain important params across navigation
@@ -165,6 +173,26 @@ function JobsIndexComponent() {
         }
       });
 
+      const currentSearchParams = {
+        id: id?.map(String),
+        kind,
+        priority: priority?.map(String),
+        queue,
+      };
+
+      // Avoid no-op navigations that can race with route transitions.
+      if (
+        areStringArraysEqual(currentSearchParams.id, searchParams.id) &&
+        areStringArraysEqual(currentSearchParams.kind, searchParams.kind) &&
+        areStringArraysEqual(
+          currentSearchParams.priority,
+          searchParams.priority,
+        ) &&
+        areStringArraysEqual(currentSearchParams.queue, searchParams.queue)
+      ) {
+        return;
+      }
+
       // Update route search params, preserving other existing ones
       navigate({
         replace: true,
@@ -179,7 +207,7 @@ function JobsIndexComponent() {
           },
       });
     },
-    [navigate],
+    [id, kind, navigate, priority, queue],
   );
 
   // Convert current search params to initial filters