# Cursor Rules: React + TypeScript — Component & Hooks Patterns

> Cursor rules for React with TypeScript. Enforces functional components, hooks patterns, proper typing, and testing conventions.

## Install

Save in your project root:

## Quick Use

Create `.cursor/rules/react-ts.mdc` in your project root.

---

## Intro

Teaches Cursor AI to write production-quality React + TypeScript code. Covers component patterns, hooks, state management, performance optimization, and testing.

**Best for**: React developers using Cursor IDE
**Works with**: Cursor

---

## 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.

## Source & Thanks

> Curated from the [cursor.directory](https://cursor.directory) community.

---
Source: https://tokrepo.com/en/workflows/ac71b14f-5ff6-4eb3-8087-a2b999a4a5f9
Author: AI Open Source