Cursor Rules: React + TypeScript — Component & Hooks Patterns

Rules Include

Components

• Functional components only (no class components)
• Props interfaces (not type) with descriptive names
• React.FC avoided — use explicit return types
• Component files: one component per file, named exports

Hooks

• Custom hooks for shared logic (prefix with use)
• useMemo/useCallback only for measured performance issues
• useReducer for complex state, useState for simple

TypeScript

• Strict mode enabled
• Discriminated unions for component variants
• Generic components when type flexibility needed
• as const for literal types

Testing

• React Testing Library (not Enzyme)
• Test behavior, not implementation
• userEvent over fireEvent

FAQ

Q: What is Cursor Rules: React + TypeScript? A: Cursor rules for React with TypeScript. Enforces functional components, hooks patterns, proper typing, and testing conventions.

Q: How do I install Cursor Rules: React + TypeScript? A: Check the Quick Use section above for step-by-step installation instructions. Most assets can be set up in under 2 minutes.