20 ChatGPT Prompts for React Developers

Create a custom React hook called 'use[FunctionName]' that [describe functionality]. Include TypeScript types, error handling, and comments explaining each part of the implementation. Also provide an example of how to use this hook in a functional component.

I have a React component with the following structure: [paste your component code]. Refactor this component to follow best practices including: proper state management, memoization where appropriate, optimized renders, and a clean separation of concerns. Explain each improvement you make.

For my React application that [describe app functionality and scale], help me decide which state management approach to use. Compare useState/useContext, Redux, Zustand, Jotai, and Recoil for my specific needs. Structure your answer with pros/cons for each and a final recommendation with implementation steps.

My React application is experiencing performance issues. Here are the symptoms: [describe performance issues]. Help me create a debugging checklist specifically for React, including tools to use (React DevTools, Lighthouse, etc.), common anti-patterns to look for, and a step-by-step process to identify and fix render bottlenecks.

Help me design a robust API for a reusable React [component type] component. The component needs to [describe functionality]. Include prop definitions with TypeScript types, default props, required vs optional props, event handlers, and composition patterns. Explain your design decisions.

Create a comprehensive testing strategy for my React application that [describe app]. Include what to test (and what not to test), which testing libraries to use (Jest, React Testing Library, Cypress, etc.), how to structure tests, and example test cases for components, hooks, context, and reducers. Provide actual code examples for critical tests.

Recommend the best data fetching approach for my React application where [describe data requirements and user interactions]. Compare React Query, SWR, Apollo Client, and custom fetch hooks. Provide implementation examples for the recommended approach, including loading states, error handling, and cache invalidation.

Refactor the following monolithic React component [paste component code] using advanced composition patterns. Demonstrate how to break it down using techniques like Compound Components, Render Props, Custom Hooks, Higher-Order Components, or the Provider Pattern. Explain the benefits of your approach.

Design a routing structure for my React application that has the following pages and features: [list pages/features]. Use React Router v6, and include code for: route configuration, nested routes, protected routes, route parameters, query parameters, and navigation. Also explain how to handle 404 pages and route transitions.

Review the following useEffect hooks [paste useEffect code] and analyze the dependency arrays. Identify any missing dependencies, unnecessary dependencies, or potential infinite loops. Explain why each issue is problematic and provide corrected versions with explanations.

Create a React form for [describe form purpose and fields] using best practices. Compare implementations using: plain React (controlled components), React Hook Form, Formik, and Final Form. For your recommended approach, provide complete code including validation, error handling, field arrays (if needed), and form submission.

Analyze this React component's state update logic [paste component code]. Identify potential issues with state batching, race conditions, or unnecessary renders. Provide an optimized version that properly handles multiple state updates, including any relevant React 18 features that could help.

Design a scalable architecture for a React application with [describe expected scale and features]. Include folder structure, file naming conventions, state management approach, code splitting strategy, performance considerations, and patterns for reusability. Explain how your architecture supports team collaboration and maintainability.

For my React project [describe project], recommend a CSS-in-JS solution. Compare Styled Components, Emotion, CSS Modules, Tailwind CSS, and other approaches based on: performance, developer experience, bundle size, SSR compatibility, and community support. Include code examples for creating and using styled components in your recommended solution.

Optimize the following React Context implementation [paste context code] to prevent unnecessary re-renders. Demonstrate techniques like context splitting, memoization, and the use of useMemo/useCallback. Provide a before/after comparison and explain the performance improvements.

Perform an accessibility (a11y) audit on this React component [paste component code]. Identify WCAG compliance issues and provide fixes for: keyboard navigation, screen reader support, color contrast, focus management, and proper ARIA attributes. Include testing procedures to verify your improvements.

Implement animations for a React [component type] that needs to [describe animation needs]. Compare approaches using CSS transitions, React Spring, Framer Motion, and GSAP. Provide code examples for your recommended solution, including handling mount/unmount animations and gesture-based interactions.

For a Next.js 13+ application, help me decide which components should be Server Components vs. Client Components. The application includes: [describe key features/components]. For each component type, explain the tradeoffs and provide a decision framework. Include code examples showing proper implementation of both component types.

Create a robust error handling strategy for my React application using Error Boundaries. Include code for a reusable ErrorBoundary component, strategies for recovering from errors, logging errors to a service, and providing user-friendly fallback UIs. Also explain how Error Boundaries work with async errors and React 18.

Create a comprehensive code review checklist specifically for React applications. Include items related to: performance, security, accessibility, state management, component structure, hooks usage, testing, and common anti-patterns. For each item, provide examples of what good and bad implementations look like.