AI Prompts for ChatGPT for React

I need to build a [DESCRIBE UI FEATURE, E.G. "DATA TABLE WITH SORTING AND PAGINATION"]. Break this into a component tree, naming each component, describing its responsibility, and defining the props interface for each.

I have this large component that does too much: [PASTE COMPONENT]. Refactor it into smaller, focused components. Show the new structure with clear separation of display logic, data fetching, and state management.

Design a compound component pattern for [DESCRIBE UI, E.G. "A MODAL" OR "A DROPDOWN MENU"]. Show the parent component, each child component, and how they share state through context without prop drilling.

I want to build a [DESCRIBE FORM, E.G. "MULTI-STEP CHECKOUT FORM"]. Outline the component hierarchy, which components are controlled vs uncontrolled, and where form state should live.

Review this component for issues: [PASTE COMPONENT]. Flag any prop drilling, missing memoization, side effects in render, or state that should be lifted or moved to a custom hook.

Write a custom hook called use[NAME] that [DESCRIBE BEHAVIOR, E.G. "FETCHES DATA FROM A URL WITH LOADING AND ERROR STATES"]. It should accept typed parameters and return typed values.

I need a hook that [DESCRIBE COMPLEX LOGIC, E.G. "MANAGES INFINITE SCROLL PAGINATION"]. Write it with proper cleanup, handle edge cases like race conditions and empty results, and show a usage example.

Refactor this logic out of my component into a custom hook: [PASTE COMPONENT LOGIC]. The hook should be reusable, handle its own cleanup, and expose the minimum interface needed by the component.

Write a useDebounce hook that delays a value update by [N] ms. Then show how to use it to debounce a search input without blocking the UI.

I want a hook that syncs state to localStorage. Write useLocalStorage with typed key and value, handling JSON serialization, SSR safety, and storage events to sync across tabs.

This component re-renders too often: [PASTE COMPONENT]. Identify what is causing the re-renders, show where to add useMemo and useCallback, and explain when each is actually worth the trade-off.

I have a list that renders [N] items and scrolls slowly. Implement virtual scrolling using [REACT-WINDOW OR A MANUAL APPROACH] for this component: [PASTE COMPONENT]. Explain the key decisions.

Explain how React.memo, useMemo, and useCallback interact in this component tree: [PASTE TREE]. Show which components will re-render on a given state change and how to prevent unnecessary ones.

I want to code-split this large feature: [DESCRIBE FEATURE]. Show how to use React.lazy and Suspense to load it only when needed, with a proper loading fallback.

Profile this component for performance issues: [PASTE COMPONENT]. Identify any derived state that should be memoized, event handlers that should be stable, and context values that cause broad re-renders.

I need to manage [DESCRIBE GLOBAL STATE, E.G. "AUTHENTICATED USER AND PERMISSIONS"]. Recommend whether to use React context, Zustand, or Redux for this case, then implement the chosen solution.

Show me how to use React Query (TanStack Query) to fetch, cache, and update [DESCRIBE DATA]. Include the query key structure, stale time config, and an optimistic update for the mutation.

I have this complex useReducer state: [PASTE REDUCER]. Identify any state that could be derived instead of stored, simplify the reducer, and add TypeScript types for actions and state.

Write a form using React Hook Form for [DESCRIBE FORM FIELDS AND VALIDATION RULES]. Include field-level and form-level validation, error display, and a typed submit handler.

I need to fetch data in a Next.js App Router component. Show the server component version with error handling, the streaming version with Suspense, and when to use each approach.