Production-Ready Rule
•
src/**/*.{ts,tsx}
React 19 & Vite TypeScript .cursorrules (.mdc)
Production-ready .cursorrules and .mdc rules for React 19 and Vite. Enforce clean custom hooks, prevent redundant useEffect cycles, and guarantee strict TypeScript safety.
.cursor/rules/react-vite.mdc
---
description: React 19 and Vite SPA development standards with strict TypeScript
globs: src/**/*.{ts,tsx}
alwaysApply: false
---
# React 19 & Vite Standards
## Component Architecture
- Use functional components exclusively with TypeScript interfaces for props.
- Keep components small and focused. Extract sub-components when JSX exceeds ~120 lines.
- Do NOT use `React.FC`. Define props directly: `function Button({ label, onClick }: ButtonProps)`.
## Hook Hygiene & State Management
- Never use `useEffect` to synchronize or derive state that can be computed during render.
- Keep `useState` local to the component that requires it; lift state only when shared by siblings.
- Custom hooks must start with `use*`, reside in `src/hooks/`, and return typed arrays or objects.
⭐
Using this rule in your open-source project? Reference in your README:
https://cursor.pacebowl.com/rules/react-vite.html
Frequently Asked Questions & Implementation Notes
How do these rules improve React hook hygiene?
They forbid using useEffect for calculating derived state. The AI is instructed to compute values inline during render or use useMemo only when backed by performance measurements.
Does this rule work with Vite and TypeScript?
Yes, globs are scoped to src/**/*.{ts,tsx} and enforce strict TypeScript without any 'any' types, along with modern ES module imports.