SearchPage.tsx

import * as React from 'react';

function useDebouncedValue<T>(value: T, timeout: number) {
  const [debouncedValue, setDebouncedValue] = React.useState(value);

  React.useEffect(() => {
    const id = setTimeout(() => setDebouncedValue(value), timeout);
    return () => clearTimeout(id);
  }, [value, timeout]);

  return debouncedValue;
}

async function getSeachResults(signal: AbortSignal, query: string) {
  const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal );
  const data = await response.json();

  return data;
}

export function SearchPage() {
  const [value, setValue] = React.useState('');
  const [results, setResults] = React.useState([]);
  const debouncedValue = useDebouncedValue(value, 300);

  React.useEffect(() => {
    const controller = new AbortController();
    getSeachResults(controller.signal, debouncedValue).then(setResults);

    return () => {
      controller.abort();
    };
  }, [debouncedValue]);

  // render
}