24 free prompts · all verified
React prompts
React-specific prompts for AI coding assistants — component generation with real prop contracts, hook extraction, performance passes and migration briefs that name actual React APIs instead of hand-waving.
Every prompt lists the exact tool and version it was tested against.
Extract a reusable hook without changing what the component doesPulls one piece of stateful logic out of a component into a properly named, typed custom hook with a minimal return contract, while treating any behavior change as a bug, not a byproduct.Claude CodeCursor2026-07-28Break a 600-line component into a maintainable treeSplits an overgrown component along its actual seams — data, layout, and interaction — instead of by line count, and flags where the split reveals a real prop-drilling or context problem instead of hiding it.Claude CodeCursor2026-07-21Diagnose wasted re-renders before wrapping everything in memoA diagnosis-first performance audit that names the actual re-render trigger and branches its entire recommendation set on whether React Compiler is enabled, instead of reflexively prescribing useMemo, useCallback, and memo.Claude CodeCursor2026-07-25Design Suspense boundaries that don't collapse into one big spinnerPlaces Suspense boundaries around real independently-loading regions of a page so it reveals content progressively, instead of either waterfalling requests behind nested boundaries or blocking everything behind one top-level spinner.Claude CodeCursor2026-07-24Convert a form's manual state juggling to React 19 ActionsMigrates an onSubmit-plus-useState form to useActionState, useFormStatus, and useOptimistic only where each genuinely earns its place, instead of hand-rolled pending and error booleans.Claude CodeCursor2026-07-25Run an accessibility audit on a component before it shipsA component-level a11y audit that checks role-specific WCAG success criteria against the actual JSX, not a generic "add aria-label everywhere" pass, and states plainly what static code review cannot verify.Claude CodeClaude2026-07-25Decide whether this state needs lifting, context, or an external storeA decision-framework prompt that picks the right home for a specific piece of shared state based on update frequency, consumer spread, and persistence needs, instead of defaulting to context for everything.Claude CodeChatGPT2026-07-25Write component tests that check behavior, not implementation detailsGenerates React Testing Library tests driven by accessible queries and user-visible behavior, with a guard against testing internal state, CSS classes, or props directly.Claude CodeCursor2026-07-25Fix prop drilling without reaching for Redux as the first moveFixes a prop-drilling chain with composition or a narrowly-scoped context first, and only escalates to an external store if the data is needed outside the subtree or updates too frequently for context.Claude CodeCursor2026-07-22Design a component API that won't need a breaking change in six monthsDesigns a design-system component's public prop contract by working backward from real use cases, with explicit composition slots instead of a new boolean prop for every variant, and a written out-of-scope list.Claude CodeClaude2026-07-20Migrate a class component to hooks without silently dropping lifecycle behaviorA class-to-function migration that maps each lifecycle method to its hook equivalent explicitly, and names the cases where the mapping isn't 1:1 rather than papering over them.Claude CodeCursor2026-07-25Implement a smooth transition between two UI states in ReactImplements an enter/exit or shared-element transition using the lightest mechanism that actually produces the described motion — CSS, startTransition, or the View Transition API — instead of defaulting to a heavy animation library.Claude CodeCursor2026-07-27Virtualize a long list or table without losing keyboard and screen-reader supportWindows a large dataset with react-window or TanStack Virtual, choosing between fixed and measured row heights correctly and preserving roving-tabindex keyboard navigation and ARIA row semantics that off-screen virtualization would otherwise silently break.Claude CodeCursor2026-07-26Add an optimistic update that actually rolls back cleanly on failureImplements an optimistic UI update for a specific action — a like, a save, a reorder — with a real rollback and error surface for the failure path, not just the happy-path demo most optimistic-update examples show.Claude CodeCursor2026-08-01Build search-as-you-type that stays responsive without lagging the inputImplements a live-filtering search box choosing correctly between useDeferredValue, manual debouncing, or both — because they solve different problems and neither one alone covers a network-backed search.Claude CodeCursor2026-07-30Build a compound component that lets the consumer control markup, not just propsImplements a Tabs- or Accordion-style compound component using a narrowly-scoped context so subcomponents share implicit state while the consumer keeps full control over composition and order.Claude CodeCursor2026-07-29Build a polymorphic component that renders as any element without losing typesImplements an asChild-style polymorphic component that merges its props and ref onto the consumer's chosen child element instead of wrapping it in an extra DOM node, with TypeScript generics that keep the merged props fully typed.Claude CodeCursor2026-07-31Build an error boundary that lets the user actually recoverImplements a class-based error boundary — the one place hooks genuinely have no equivalent — with a real retry-and-reset UX and error reporting, instead of a static crash screen that leaves the only recovery option as a full page reload.Claude CodeCursor2026-07-23Find and fix a hydration mismatch instead of silencing the warningDiagnoses a server-rendered React app where the client-rendered output disagrees with the server-rendered HTML, names the real cause from the actual common list, and fixes it at the source instead of reaching for suppressHydrationWarning.Claude CodeCursor2026-07-27Build a multi-step form where client feedback and real validation never disagreeWires React Hook Form to a Zod schema per step, with cross-field rules expressed at the schema level rather than scattered across handlers, so the instant client-side feedback and the actual submission validation are provably the same rules.Claude CodeCursor2026-07-24Build drag-and-drop reordering that works without a mouseImplements a reorderable list with pointer-based drag-and-drop plus a full keyboard-operable fallback and live-region announcements, since drag interactions are invisible to screen readers and unusable without a pointer unless built in from the start.Claude CodeCursor2026-07-26Build infinite scroll that never shows duplicate or skipped itemsImplements an infinite-scroll list backed by cursor-based pagination and an IntersectionObserver trigger, guarding explicitly against the duplicate-fetch and page-drift bugs that offset-based pagination and naive scroll listeners both produce under real, concurrent data.Claude CodeCursor2026-07-29Replace an ad hoc useEffect subscription with useSyncExternalStoreMigrates a manual useEffect-plus-useState subscription to an external, non-React data source onto useSyncExternalStore, closing the tearing risk under concurrent rendering that the manual pattern cannot rule out.Claude CodeCursor2026-08-02Turn a loose component spec into a typed, accessible React component you'd actually mergeConverts a rough description of a reusable React component into a full TypeScript implementation with a defensible prop API, explicit state ownership, keyboard/screen-reader support, and a reviewer's checklist of the edge cases it handles — instead of a demo-quality snippet that only covers the happy path.ChatGPT (GPT-5.1)2026-08-11
