AI Prompts for Claude for React

I need to build a [DESCRIBE UI FEATURE]. Break it into a component tree with a name and single responsibility for each component. Show me the props interface for each one.

I have a component doing too many things: [PASTE COMPONENT]. Refactor it into smaller, focused pieces. Separate the data fetching, state management, and display logic.

Design a compound component for [DESCRIBE UI, E.G. "A TABS WIDGET" OR "AN ACCORDION"]. Show how the parent and children share state without prop drilling, using context.

Review this component for common React problems: [PASTE COMPONENT]. Flag any: unnecessary re-renders, state that could be derived, prop drilling that should be context, and missing cleanup.

I want to build [DESCRIBE FORM]. Tell me: which fields should be controlled vs uncontrolled, where form state should live, and which validation approach fits this use case.

Write a custom hook called use[NAME] that [DESCRIBE BEHAVIOR]. Accept typed parameters, return typed values, and handle cleanup properly.

Refactor this logic from my component into a custom hook: [PASTE LOGIC]. The hook should be reusable across components and expose the minimal interface needed.

I need a useFetch hook that handles loading, error, and data states for any URL. Write it with TypeScript, handle request cancellation on unmount, and show a usage example.

My component has complex state transitions. Should I use useState, useReducer, or an external store for this: [DESCRIBE STATE SHAPE AND HOW IT CHANGES]? Show me the implementation you recommend.

Write a useDebounce hook and show how to use it to debounce a search input that triggers an API call on every keystroke.

This component re-renders too often: [PASTE COMPONENT]. Identify the cause, show where to add React.memo, useMemo, and useCallback, and explain which are actually worth adding here.

I have a list of [N] items that is laggy when scrolling. Implement virtualization for this component: [PASTE COMPONENT]. Explain the key trade-offs.

My context re-renders all consumers on every update. Here is my context: [PASTE CONTEXT]. Refactor it to minimize unnecessary re-renders by splitting or memoizing correctly.

Explain whether I need React.memo for this component: [PASTE COMPONENT]. Show me the parent rendering pattern and tell me what actually triggers a re-render here.

I want to lazy-load [DESCRIBE HEAVY COMPONENT OR ROUTE]. Show me the React.lazy and Suspense setup, the fallback, and how to prefetch it so users do not wait.

Show me how to fetch [DESCRIBE DATA] with React Query (TanStack Query). Include the query key design, stale time, error handling, and an optimistic mutation.

I use useEffect to fetch data and have bugs: [DESCRIBE BUG OR PASTE CODE]. Explain what is wrong, fix the dependency array issues, and show the correct pattern.

Write the server component and client component split for this Next.js App Router feature: [DESCRIBE FEATURE]. Explain what belongs in each and why.

I need to manage [DESCRIBE SHARED STATE] across many components. Compare: lifting state, React context, Zustand, and React Query for this specific use case. Recommend the best fit.

Write a form with React Hook Form for [DESCRIBE FIELDS AND VALIDATION]. Include field-level and schema-level validation, error display, and a typed onSubmit handler.