Review: Debounced Product Search Written by an AI Assistant

Published 10 Nov, 2026

Your team asked an AI coding assistant to build the search-as-you-type box for a marketplace's header. It opened this pull request with a custom hook and a results component. You are the reviewer, and nothing merges without your approval.

The assistant's description:

Adds useProductSearch, a debounced search hook (300 ms), and SearchResults, which highlights the matching text in each product name and supports keyboard navigation (arrow keys and Enter). Only the latest results are ever shown.

Where it runs: React 18 in the marketplace's main web app, on every page, for signed-in shoppers. Product names are written by third-party sellers. The search API answers in anything from 50 ms to 2 s under load and returns {"error": "..."} with status 429 or 500 when it is overloaded.

Your task

Flag every problem you would block the merge for. Click a line number to comment, and Shift-click to cover a range.
For each one, choose the issue type and severity, and explain what fails and how to fix it.
You are scored on the problems you catch, the right issue type and a clear explanation. Missing a critical problem fails the round.

Aim for 15 minutes, as in a real review round.

Product names come from sellers. Follow p.name until it reaches the page.

Type c++ or ( into the box. What does new RegExp do with it?

Type four letters quickly. How many timers are created, and how many are cancelled?

The request for ca takes 2 s and the one for cat takes 100 ms. Which results stay on screen?

The key handler is registered once, on the first render. What values of selected and results does it see for ever?

A strong reviewer blocks this on the XSS first, since it lets any seller run script in every shopper's session, and then on the claim that only the latest results are shown, which is not true.

Stored XSS through product names (SearchResults.tsx line 44, critical). highlight returns the seller-written name as raw HTML and dangerouslySetInnerHTML renders it. A product called <img src=x onerror=...> runs script for every shopper who searches for it. Render the name as text and wrap the matched parts in <mark> elements in JSX, or escape the name before inserting markup.
Search term used as a regular expression (SearchResults.tsx line 13, major). Typing c++, ( or [ makes new RegExp throw during render, which unmounts the search box (and, without an error boundary, the page). Characters such as . also match the wrong text. Escape the term, or match with indexOf on lower-cased strings.
Key handler has stale state and is never removed (SearchResults.tsx lines 22–29, major). With an empty dependency array, onKeyDown closes over the first render's selected (0) and results (empty), so arrow keys and Enter never work. The effect also has no cleanup, so each mount adds another window listener that is never removed. Keep the latest values in a ref or list them as dependencies, and return () => window.removeEventListener("keydown", onKeyDown).
Debounce timer is never cleared (useProductSearch.ts lines 42–43, major). The effect does not return () => clearTimeout(timer), so every keystroke still fires its own request 300 ms later. There is no debouncing at all, and a timer that fires after the box is cleared puts old results back.
Out-of-order responses overwrite newer ones (useProductSearch.ts line 35, major). When a slow response for ca lands after a fast one for cat, the stale results win, and the older request's finally turns off the spinner while the newer one is still loading. Abort the previous request with an AbortController in the effect cleanup, or ignore responses whose query is no longer current.
Error responses treated as results (useProductSearch.ts line 34, major). fetch does not reject on 429 or 500. The {"error": ...} body is stored as results, and results.map then throws during render. Check res.ok and set the error state instead.
Query not URL-encoded (useProductSearch.ts line 33, minor). Searching for AT&T sends q=AT, and c++ arrives as c plus spaces. Use encodeURIComponent(query) or URLSearchParams.

import { useEffect, useState } from "react";

export interface Product {
  id: string;
  name: string;
  pricePence: number;
}

export interface SearchState {
  results: Product[];
  loading: boolean;
  error: string | null;
}

/**
 * Debounced product search. Waits until the user has stopped typing for
 * `delay` ms, then calls the search API and returns the latest results.
 */
export function useProductSearch(query: string, delay = 300): SearchState {
  const [results, setResults] = useState<Product[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

useEffect(() => {
    if (query.trim() === "") {
      setResults([]);
      return;
    }

return { results, loading, error };
}

import { useEffect, useState } from "react";
import { useProductSearch, Product } from "./useProductSearch";
import { formatPence } from "./format";
import { Spinner } from "./Spinner";

interface Props {
  onPick: (product: Product) => void;
}

// Wraps each match of the search term in <mark> so it stands out.
function highlight(text: string, term: string): string {
  if (!term) return text;
  return text.replace(new RegExp(`(${term})`, "gi"), "<mark>$1</mark>");
}

export function SearchResults({ onPick }: Props) {
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState(0);
  const { results, loading, error } = useProductSearch(query);

// Arrow keys move the selection, Enter picks the selected product.
  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "ArrowDown") setSelected(Math.min(selected + 1, results.length - 1));
      if (e.key === "ArrowUp") setSelected(Math.max(selected - 1, 0));
      if (e.key === "Enter" && results[selected]) onPick(results[selected]);
    }
    window.addEventListener("keydown", onKeyDown);
  }, []);

return (
    <div className="search">
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search products"
        aria-label="Search products"
      />
      {loading && <Spinner />}
      {error && <p role="alert">{error}</p>}
      <ul role="listbox">
        {results.map((p, i) => (
          <li key={p.id} role="option" aria-selected={i === selected}>
            <span dangerouslySetInnerHTML={{ __html: highlight(p.name, query) }} />
            <span className="price">{formatPence(p.pricePence)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

{"issues":[
{"id": "xss", "file": "src/search/SearchResults.tsx", "lines": [44, 44], "category": "security", "severity": "critical", "title": "Seller-written product names rendered as raw HTML", "explanation": "highlight returns the product name unescaped and dangerouslySetInnerHTML renders it, so a seller can name a product <img src=x onerror=...> and run script in every shopper's session.", "keywords": ["xss", "dangerouslysetinnerhtml", "innerhtml", "escape", "sanitiz", "sanitis", "script", "html injection", "inject"], "fix": "Render the name as text and wrap matches in <mark> elements in JSX, or escape the name before adding markup."},
{"id": "regex", "file": "src/search/SearchResults.tsx", "lines": [13, 13], "category": "bug", "severity": "major", "title": "Search term passed unescaped to new RegExp", "explanation": "Typing c++, ( or [ makes new RegExp throw during render, which unmounts the component; regex characters such as . also highlight the wrong text.", "keywords": ["regexp", "regex", "escape", "special character", "throw", "c++", "syntaxerror", "crash", "indexof"], "accept": ["edge", "security"], "fix": "Escape regex metacharacters in the term, or find matches with indexOf on lower-cased strings."},
{"id": "stale-keys", "file": "src/search/SearchResults.tsx", "lines": [22, 29], "category": "bug", "severity": "major", "title": "Keyboard handler has stale state and leaks a listener", "explanation": "The effect has an empty dependency array, so onKeyDown always sees selected = 0 and the first, empty results; arrow keys and Enter never work. It also never removes the window listener, so every mount adds another.", "keywords": ["stale", "closure", "dependenc", "deps", "removeeventlistener", "cleanup", "clean up", "leak", "useref", "latest value"], "accept": ["concurrency", "perf"], "fix": "Read the latest values from a ref or list them as dependencies, and return a cleanup that calls removeEventListener."},
{"id": "no-debounce", "file": "src/search/useProductSearch.ts", "lines": [42, 43], "category": "bug", "severity": "major", "title": "Timer never cleared, so nothing is debounced", "explanation": "The effect does not return a cleanup, so the timer from every keystroke still fires and sends its own request. A timer that fires after the box is cleared also puts old results back.", "keywords": ["cleartimeout", "cleanup", "clean up", "debounce", "every keystroke", "timer", "settimeout"], "accept": ["perf", "concurrency"], "fix": "Return () => clearTimeout(timer) from the effect."},
{"id": "race", "file": "src/search/useProductSearch.ts", "lines": [35, 35], "category": "concurrency", "severity": "major", "title": "Slow older responses overwrite newer results", "explanation": "Requests are not cancelled or checked, so a slow response for an earlier query can land last and replace the results for the current query; the older request's finally also clears loading while the newer one is pending.", "keywords": ["race", "out of order", "out-of-order", "abort", "abortcontroller", "stale", "latest", "ignore", "cancel"], "accept": ["bug"], "fix": "Abort the previous request with an AbortController in the effect cleanup, or ignore responses whose query is no longer current."},
{"id": "res-ok", "file": "src/search/useProductSearch.ts", "lines": [34, 34], "category": "bug", "severity": "major", "title": "Error responses stored as results", "explanation": "fetch does not reject on 429 or 500, so the {error} object is stored as results and results.map throws during render.", "keywords": ["res.ok", "status", "429", "500", "not an array", ".map", "error response", "status code"], "accept": ["edge", "api"], "fix": "Check res.ok and set the error state when the request failed."},
{"id": "encode", "file": "src/search/useProductSearch.ts", "lines": [33, 33], "category": "bug", "severity": "minor", "title": "Query string not URL-encoded", "explanation": "Searching for AT&T sends q=AT, c++ turns into spaces and # cuts the query off.", "keywords": ["encodeuricomponent", "encode", "urlsearchparams", "escape", "&", "special character"], "accept": ["edge"], "fix": "Build the URL with encodeURIComponent(query) or URLSearchParams."}
]}

Topics #007 AI Code Review Concurrency Front End Medium React Security TypeScript