CursorReactArchitecture

React Cursor Rules

Cursor rules for React: component patterns, hooks best practices, performance optimization, and clean state management conventions.

.cursorrules
- Components should have single responsibility; split when exceeding ~150 lines
- Use React Query or SWR for async state; avoid useEffect for data fetching
- Memoize with useMemo for expensive computations; useCallback for stable callbacks
- Colocate state as close to where it is used as possible
- Prefer controlled components with explicit state over uncontrolled refs
- Use compound components pattern for complex UI with shared state
- Extract custom hooks to share stateful logic across components
- Use React.lazy and Suspense for code-splitting heavy components

How to use with Cursor

Create a `.cursorrules` file in your project root and paste these rules. Cursor reads this automatically on every AI interaction.

#react#hooks#components#cursor#coding-rules

Related Rules