Cursor Rules for
React

This rule serves as your React guide in Cursor, offering AI assistance with React component patterns, hooks usage, and best practices. Whether you're building new components or refactoring existing code, this rule helps you follow modern React conventions and write maintainable code.

What this rule does

The React rule provides guidance for writing high-quality React code according to modern best practices. It focuses on several key areas of React development:

• Encouraging the use of functional components with hooks
• Promoting code reusability through custom hooks
• Providing guidance on state management
• Ensuring proper component performance optimization
• Recommending structural patterns for clean component hierarchies

When activated, the rule instructs Cursor's AI to provide suggestions and code completions aligned with these React best practices, helping you write more maintainable and efficient React code.

React best practices covered

Functional components and hooks

The rule encourages using functional components with hooks instead of class components, following modern React development patterns. This approach results in more concise code that's easier to test and maintain.

For example, instead of writing:

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: props.name };
  }
  
  render() {
    return <div>Hello, {this.state.name}!</div>;
  }
}

The AI will suggest functional components with hooks:

function UserProfile({ name }) {
  const [userName, setUserName] = useState(name);
  
  return <div>Hello, {userName}!</div>;
}

Custom hooks for reusable logic

The rule promotes extracting reusable logic into custom hooks, making your code more modular and testable. Custom hooks allow you to share stateful logic between components without duplicating code.

Context API for state management

When global state is needed, the rule suggests using React's Context API appropriately, helping you avoid prop drilling while maintaining clean component architecture.

Other recommended practices

The rule also covers:

• Using PropTypes for proper prop validation
• Implementing React.memo for performance optimization
• Using fragments to avoid unnecessary DOM elements
• Ensuring proper list rendering with keys
• Favoring composition over inheritance for component relationships

Using React in Cursor

To benefit from these React best practices while working in Cursor:

1. The rule is defined in the file react.mdc within your project's .cursor/rules directory.

2. This rule is likely configured as an "Auto Attached" rule, as it has glob patterns (**/*.jsx,**/*.tsx). This means the rule activates automatically whenever you're working with JSX or TSX files in your project.

3. If you need to manually invoke the rule in other contexts, you can type @react in the chat or Cmd-K interface.

When activated, the rule provides context to Cursor's AI, guiding it to offer suggestions and code completions that follow modern React best practices.

Usage tips

Working with components

When creating new components, let Cursor help you structure them according to best practices. The AI will suggest functional components with hooks and proper prop handling.

Refactoring legacy code

If you're working with older React codebases that use class components, the AI can help you refactor to functional components with hooks, making your code more maintainable.

State management assistance

When you're implementing state management in your components, the AI will provide guidance on whether to use local state with useState, shared logic with custom hooks, or global state with Context API based on your specific needs.

Performance optimization

As your application grows, the AI can help identify opportunities for performance optimization using React.memo, useMemo, and useCallback in appropriate situations.