---
description: When user works on React frontend files (in src/ or components/, using .js, .jsx, .ts, .tsx extensions), apply these best practices for organization, state management, performance, and testing
globs: src/**/*.{js,jsx,ts,tsx}, components/**/*.{js,jsx,ts,tsx}
alwaysApply: false
---
# Rules for Frontend Development with React
## Code Organization
- Use feature-based or component-type folder structure
- Keep components small and with a single responsibility
- Separate business logic from UI using custom hooks
- Implement lazy loading for large or non-critical components
## Components
- Prefer functional components over class components
- Use React.memo to avoid unnecessary re-renders
- Document props with PropTypes or TypeScript
- Name components using PascalCase
- Extract complex logic to custom hooks
## State Management
- Use useState for simple local state
- Implement useReducer for complex or related states
- For global state, prefer Context API for simple states or Redux/Zustand for complex applications
- Avoid props drilling by using Context API or compound components
## Performance
- Use React.memo, useMemo and useCallback appropriately
- Avoid expensive calculations on each render
- Implement virtualization for long lists
- Consider Server-Side Rendering or Static Site Generation to improve First Contentful Paint
## Styling
- Prefer CSS-in-JS (styled-components, emotion) or CSS Modules
- Maintain consistency with a design system
- Implement responsive and mobile-first design
- Use CSS variables for theming and configuration
## Testing
- Write unit tests for hooks and business logic
- Use React Testing Library for component tests
- Create integration tests for critical flows
- Implement e2e tests for important user flows
## Accessibility
- Follow WCAG 2.1 guidelines
- Use semantic HTML elements
- Provide alternative texts for visual elements
- Ensure the application is keyboard navigable
## Code Conventions
- Follow Airbnb's style guide for React/JSX
- Use ESLint and Prettier to maintain consistency
- Write explanatory comments for complex logic
- Maintain clear documentation for reusable components
