mediumHallucinated APIsReact

The plausible hook

A developer asked an AI assistant to debounce a search input in a React component. The suggestion imports a hook directly from 'react' that sounds exactly like something the library should ship. The build fails before the component ever renders.

SearchBox.jsx

import { useDebounce, useEffect, useState } from 'react';

function SearchBox({ onSearch }) {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) onSearch(debouncedQuery);
  }, [debouncedQuery]);

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

Why does this component fail to build?

'react' does not export a useDebounce hook — React ships no built-in debouncing utility.

useState is called conditionally, violating the rules of hooks.

onSearch is called with a stale closure over query.

The input is missing a name attribute, which React requires.