React Custom Hook with Debounce & AbortController
Category: coding | Target AI: Claude / Gemini
Builds memory-safe, race-condition-free async React state logic. Copy or customize this production-ready prompt template for Claude / Gemini with our free AI prompt enhancer.
Prompt Template
Create a reusable TypeScript React hook named useAsyncSearch(query: string, fetchFn: (q: string, signal: AbortSignal) => Promise, delayMs = 300). Implement debouncing, abort in-flight fetch requests when query changes or on unmount via AbortController, and expose { data, isLoading, error, isDebouncing }. Provide full type safety and an example usage component.
How to Use This Prompt
- Specify generic type parameters if you need strict return types.
- Run the prompt in Claude or Gemini for clean, hook-dependency-compliant React 18/19 code.
- Drop the hook into your component library.