Ship production React components 10x faster
A curated pack of 25 advanced prompts for generating production-grade React components. Covers hooks, context, performance optimization, accessibility, and testing patterns.
// Prompt generates this automatically:
export function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), delay)
return () => clearTimeout(handler)
}, [value, delay])
return debouncedValue
}// Prompt output: memoized + useCallback + lazy loading
const ProductCard = memo(function ProductCard({ item, onSelect }) {
const handleClick = useCallback(() => {
onSelect(item.id)
}, [item.id, onSelect])
return (
<div onClick={handleClick} role="button" tabIndex={0}>
<LazyImage src={item.thumbnail} alt={item.name} />
<PriceTag amount={item.price} />
</div>
)
})