Spec a debounced value hook for React search

Vibe codingEasy20 min

Your task

Your React and TypeScript app has a search box that calls the API on every keystroke. You want a useDebouncedValue hook, so the search runs only after the user stops typing for a moment. An agent will write it.

Write the spec you would hand the agent.

What you know:

  • React 18, with strict mode on in development
  • the search request runs in a useEffect that depends on the value from the hook
  • some pages have several search boxes at once
  • the team tests with Vitest and Testing Library, using fake timers

Then, in a few sentences: what does a lazy "make a debounce hook" prompt usually get wrong in React?