Cancel debounced URL updating on component dismount

frontend/src/components/SearchInput.tsx

@@ -31,9 +31,19 @@ const SearchInput = () => {
     debounce(value => {
       const path = value ? `/search?q=${encodeURIComponent(value)}` : '/'
       replace(path, undefined, { shallow: true })
-    }, 1000),
+    }, 500),
   )
 
+  // cancel on component dismount
+  useEffect(() => {
+    return () => {
+      // I don't understand what react / eslint wants us to do in this case:
+      // the ref doesn't actually change.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      debouncedUpdateUrl.current.cancel()
+    }
+  }, [])
+
   const handleChange = (value: string) => {
     debouncedSubmit.current.cancel()
     debouncedUpdateUrl.current.cancel()