78 lines
2.3 KiB
Plaintext
78 lines
2.3 KiB
Plaintext
---
|
|
description: React best practices and patterns for modern web applications
|
|
globs: **/*.tsx, **/*.jsx, components/**/*
|
|
---
|
|
|
|
# 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 |