.cursorrules for React projects: stopping the patterns you don't want

React has a lot of history. Cursor knows class components, lifecycle methods, three different state management approaches, and both the old and new ways of doing everything. Without guidance, it'll mix them. Here's the .cursorrules file that keeps a modern React project consistent. The file # React project rules ## Stack React 18, TypeScript (strict), Vite, React Query for data, Zustand for UI state ## Component patterns - Functional components only. No class components. - No React.FC or React.FunctionComponent type annotations — use explicit prop types - Props interface: ComponentNameProps (e.g., ButtonProps, UserCardProps) - One component per file. Filename = component name (PascalCase). - Default export for the component, named exports for types/utils from same file ## Hooks - Custom hooks: use * prefix, live in hooks/ - No useEffect for data fetching — use React Query - useEffect only for: subscriptions, DOM manipulation, non-React integrations - Dependencies array: always complete