Skip to content

React Development Patterns

Master React development with AI assistance using proven patterns and workflows for Cursor IDE and Claude Code. These recipes cover everything from component creation to state management, testing, and performance optimization.

Initialize React Project with AI Assistance

Section titled “Initialize React Project with AI Assistance”
  1. Open Cursor and create a new project
  2. Open Agent mode (Cmd/Ctrl + I)
  3. Prompt: “Use Context7 to get the latest Vite documentation. Create a new React TypeScript project with Vite, Tailwind CSS, and testing setup using current best practices”
  4. Enable YOLO mode to let Cursor run all setup commands automatically
  5. Review the generated project structure and configuration files
.mcp.json
{
"mcpServers": {
"figma": {
"type": "sse",
"url": "http://127.0.0.1:3845/sse"
}
}
}

Create context files to help AI understand your React patterns:

.cursor/rules/react-patterns.md
# React Development Rules
## Component Standards
- Use functional components with TypeScript
- Prefer named exports for components
- Keep components under 150 lines
- Extract custom hooks for logic reuse
## State Management
- Use React Query/TanStack Query for server state
- Zustand for client-side global state
- Local state with useState for component-specific data
## Testing Requirements
- Write tests for all components using vitest and @testing-library/react
- Minimum 80% coverage for business logic
- Test user interactions, not implementation details

Scenario: Convert a Figma design to a React component

Using Figma MCP Server:

Terminal window
# Enable Figma MCP in your Figma desktop app
# Preferences > Enable Dev Mode MCP Server
# Add Figma MCP to Claude Code
claude mcp add figma --transport sse http://127.0.0.1:3845/sse
# Or add to Cursor
# Settings > MCP > Add Server > URL: http://127.0.0.1:3845/sse

Cursor Workflow with Figma MCP:

  1. Select the component in Figma (with MCP server running)
  2. In Cursor: “Using the Figma MCP server, generate a React component from my current Figma selection. Use TypeScript and Tailwind CSS”
  3. The AI will use get_code to fetch the exact design structure
  4. Review generated component with proper design tokens

Alternative Manual Workflow:

  1. Take a screenshot of the Figma design
  2. Drag the image into Cursor chat
  3. Prompt: “Create a React component based on this design. Use TypeScript, Tailwind CSS for styling, and make it responsive”
  4. Review the generated component
  5. Ask: “Add proper TypeScript types and make the component reusable with props”

Claude Code Workflow:

  1. Save the design screenshot in your project
  2. Reference it: “Look at design.png and create a React component that matches this design. Use TypeScript, Tailwind CSS, and ensure it’s fully responsive”
  3. Claude will analyze the image and generate the component
  4. Follow up: “Add Storybook stories for this component with different states”

Cursor Agent Mode Approach:

I have a class component in UserProfile.tsx that needs to be converted to a functional component with hooks.
Please:
1. Convert all lifecycle methods to useEffect
2. Convert state to useState
3. Extract any complex logic into custom hooks
4. Maintain all existing functionality
5. Update the tests to work with the new implementation
Cursor Prompt Example
# First get the latest Zustand patterns
Use Context7 to fetch Zustand documentation and best practices
# Then create the store following current patterns
Create a Zustand store for managing user authentication with:
- User profile data
- Login/logout actions
- Persist to localStorage
- TypeScript types for all state and actions
- Selectors for commonly accessed data
- DevTools integration

Claude Code Recipe:

# First, get the latest React Query documentation
Use Context7 to get TanStack Query documentation for v5
# Then implement based on current best practices
Set up React Query in our app with:
1. Configure QueryClient with sensible defaults
2. Create custom hooks for our API endpoints
3. Add optimistic updates for mutations
4. Implement proper error handling
5. Set up query invalidation patterns
Terminal window
# PRD: Integrate Figma design system with React codebase
# Plan: Use Figma Code Connect for component mapping
"Using Figma MCP with Code Connect enabled:
1. Get code connect mappings for design system components
2. Generate React components that use our existing component library
3. Extract and apply design tokens consistently"
# Example workflow
"Select the Button component in Figma and generate React code that:
- Uses our existing Button component from '@/components/ui'
- Applies the correct variant based on Figma properties
- Uses our design token system for colors and spacing"
// Use Figma MCP to extract design tokens
"Using Figma MCP get_variable_defs:
1. List all color tokens used in the selected design
2. List spacing and typography tokens
3. Generate a theme configuration file"
// Example output
export const theme = {
colors: {
primary: {
blue: '#1D4ED8', // From Figma: Primary/Blue
dark: '#1E40AF' // From Figma: Primary/Dark
},
neutral: {
gray90: '#1A1A1A' // From Figma: Neutral/Gray90
}
},
spacing: {
sm: '8px', // From Figma: Spacing/S
md: '16px', // From Figma: Spacing/M
lg: '24px' // From Figma: Spacing/L
}
};
  1. Identify Performance Issues

    • Cursor: “Analyze MyComponent.tsx for potential performance issues and suggest optimizations”
    • Claude Code: “Review the entire components directory and identify components that could benefit from React.memo, useMemo, or useCallback”
  2. Implement Optimizations

    Optimize the ProductList component:
    - Add React.memo with proper comparison function
    - Use useMemo for expensive calculations
    - Implement virtualization for the list
    - Add lazy loading for images
  3. Verify Improvements

    • Generate performance tests
    • Add React DevTools Profiler markers
    • Create benchmarks for critical paths
    • Use Context7 to get latest React performance optimization patterns

Building a Custom Hooks Collection:

  1. Create a new file: src/hooks/index.ts
  2. Agent prompt: “Create a collection of useful custom hooks for our React app including useDebounce, useLocalStorage, useFetch, useIntersectionObserver, and useMediaQuery. Include TypeScript types and JSDoc comments”
  3. For each hook, ask: “Add comprehensive tests for useDebounce hook”
Testing Recipe
// Cursor/Claude Code Prompt:
Write comprehensive tests for the UserDashboard component:
1. Test loading states
2. Test error states
3. Test successful data rendering
4. Test user interactions (clicks, form submissions)
5. Test accessibility requirements
6. Mock API calls properly
7. Use @testing-library/react best practices

Multi-Component Interaction Testing:

Create integration tests for the checkout flow:
- Test the entire flow from cart to payment
- Mock API responses for different scenarios
- Test error recovery
- Verify proper state updates across components
- Test loading states between steps

Shared Component Library:

# PRD: Need cross-platform button component
# Plan: Use Context7 to research React Native Web patterns
# Todo:
1. Use Context7 to get React Native documentation for cross-platform components
2. Create a Button component that works in both React web and React Native:
- [ ] Use a shared types file
- [ ] Create platform-specific implementations
- [ ] Export from a common index file
- [ ] Include proper styling for each platform
- [ ] Add Storybook stories for web
- [ ] Add examples for React Native

Diagnosis and Fix Pattern:

  1. Identify: “Find components in our app that might be re-rendering unnecessarily”
  2. Analyze: “Add console.logs or React DevTools Profiler integration to track renders”
  3. Fix: “Implement proper memoization and state lifting where needed”
  4. Verify: “Create tests to ensure render count stays optimal”

useEffect Best Practices:

Review all useEffect hooks in the components/ directory and:
1. Ensure proper dependency arrays
2. Add cleanup functions where needed
3. Identify effects that should be event handlers instead
4. Split complex effects into smaller, focused ones
5. Add comments explaining why each effect is necessary

Optimization Checklist:

Prepare our React app for production:
1. Configure code splitting with React.lazy
2. Set up proper tree shaking
3. Optimize bundle size with dynamic imports
4. Configure proper caching headers
5. Set up error boundaries
6. Add performance monitoring
7. Create a bundle analysis script