react · patrickjs — Cursor rule: React component standards for your agent
This rule hands Cursor a set of React conventions: component structure, hooks, state, forms and accessibility. Useful when a project has plenty of .tsx and .jsx and you want one style.
.cursor/rules/react.mdcWhat react does
The file is .cursor/rules/react.mdc, a plain set of guidelines the agent follows when writing or editing React code. Sections cover component structure, hooks, state management, performance, forms, error handling, testing, accessibility and file organisation. Functional components over classes, custom hooks for reusable logic, useReducer for complex state, React.memo and memoisation for expensive components, controlled inputs.
Scope is limited. The globs field lists **/*.tsx, **/*.jsx and components/**/*, so a file like utils/api.ts or a build config won't pick these rules up. Worth knowing before you expect uniform guidance across the whole repo. alwaysApply is set to false, which means the rule triggers on glob matches rather than running everywhere.
There are no scripts or dependencies inside, just text. Testing guidance points at React Testing Library, accessibility at semantic HTML and ARIA. If your project tests with something else, expect to edit those lines.
What it helps with
- set one React style for the agent to follow
- split a large component into smaller pieces
- move repeated logic into a custom hook
- cut unnecessary re-renders with memoisation
- add form validation and loading states
Example prompts for the agent
- Split this component into smaller ones and move the logic into a custom hook
- Add memoisation where the component re-renders for no reason
- Make this form controlled and show a loading state on submit
How to install react
Manually: put the files in place
.cursor/rules/react.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/react.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/react.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/react.mdManually: put the files in place
.clinerules/react.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about react
How do I install the react rule in Cursor?
Create the file .cursor/rules/react.mdc and paste the rule contents into it.
What does the react rule do?
It describes React conventions: component structure, hooks and state, performance, forms, error handling, testing and accessibility. Cursor's agent leans on them while writing or editing code.
Which files does the rule apply to?
Files matching **/*.tsx, **/*.jsx and components/**/*. Outside those globs the guidance does not apply.
Source text
react.mdc · CC0-1.0
--- description: "React best practices and patterns for modern web applications" globs: **/*.tsx, **/*.jsx, components/**/* alwaysApply: false --- # React Best Practices ## Component Structure - Use functional components over class components - Keep components small and focused - Extract reusable logic into custom hooks - Use composition over inheritance - Implement proper prop types with TypeScript - Split large components into smaller, focused ones ## Hooks - Follow the Rules of Hooks - Use custom hooks for reusable logic - Keep hooks focused and simple - Use appropriate dependency arrays in useEffect - Implement cleanup in useEffect when needed - Avoid nested hooks ## State Management - Use useState for local component state - Implement useReducer for complex state logic - Use Context API for shared state - Keep state as close to where it's used as possible - Avoid prop drilling through proper state management - Use state management libraries only when necessary ## Performance - Implement proper memoization (useMemo, useCallback) - Use React.memo for expensive components - Avoid unnecessary re-renders - Implement proper lazy loading - Use proper key props in lists - Profile and optimize render performance ## Forms - Use controlled components for form inputs - Implement proper form validation - Handle form submission states properly - Show appropriate loading and error states - Use form libraries for complex forms - Implement proper accessibility for forms ## Error Handling - Implement Error Boundaries - Handle async errors properly - Show user-friendly error messages - Implement proper fallback UI - Log errors appropriately - Handle edge cases gracefully ## Testing - Write unit tests for components - Implement integration tests for complex flows - Use React Testing Library - Test user interactions - Test error scenarios - Implement proper mock data ## Accessibility - Use semantic HTML elements - Implement proper ARIA attributes - Ensure keyboard navigation - Test with screen readers - Handle focus management - Provide proper alt text for images ## Code Organization - Group related components together - Use proper file naming conventions - Implement proper directory structure - Keep styles close to components - Use proper imports/exports - Document complex component logic
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules
Similar IDE rules
All IDE rules for Frontend and UI →react by other authors comes first.
