Cursor Rules: React + TypeScript — Component & Hooks Patterns

What it is

This is a Cursor rule configuration file (.mdc) that teaches Cursor AI to write production-quality React code with TypeScript. It enforces functional component patterns, hooks best practices, proper typing for props and state, and testing conventions. When placed in your project's .cursor/rules/ directory, Cursor applies these patterns to every suggestion.

The target audience is React developers who use Cursor as their editor and want consistent, well-typed code suggestions without repeatedly correcting the AI's output.

How it saves time or tokens

Without framework-specific rules, Cursor's AI may generate class components, use any types, or ignore hooks rules like the dependency array. Correcting these mistakes burns tokens and interrupts flow. This rule file front-loads the conventions so the first suggestion is more likely to be correct. You spend fewer turns on stylistic corrections and more on actual logic.

How to use

1. Create the rules directory in your project:

mkdir -p .cursor/rules

1. Create the rule file at .cursor/rules/react-ts.mdc.

1. Add your React + TypeScript conventions. Cursor auto-loads the file on the next session.

Example

A sample .cursor/rules/react-ts.mdc file:

---
description: React + TypeScript component and hooks patterns
globs: ['**/*.tsx', '**/*.ts']
alwaysApply: false
---

# React + TypeScript Rules

Components

• Always use functional components with arrow syntax
• Define props as a named interface, not inline type
• Use React.FC only when children are expected
• Destructure props in the function signature

Hooks

• List all dependencies in useEffect/useMemo/useCallback arrays
• Extract custom hooks for reusable stateful logic
• Prefix custom hooks with 'use'

Typing

• Never use 'any'; prefer 'unknown' and narrow with type guards
• Use discriminated unions for component variants
• Type event handlers explicitly: React.ChangeEvent<HTMLInputElement>

Testing

• Use React Testing Library over Enzyme
• Test behavior, not implementation details
• Use screen.getByRole over getByTestId

Related on TokRepo

• AI Tools for Coding — more AI-assisted coding tools and editor integrations
• Prompt Library — curated prompts and configuration files for AI workflows

Common pitfalls

• Setting alwaysApply: true loads the rules for every file type, including non-React files; use glob patterns to restrict activation to .tsx and .ts files
• Overly prescriptive rules may conflict with AI suggestions, causing garbled output; keep rules at the guideline level, not line-by-line templates
• Rules do not override Cursor's model knowledge entirely; if the AI suggests something contradicting your rules, it may be responding to context in your codebase that conflicts with the rule