React

1---
2description: React best practices and patterns for modern web applications
3globs: **/*.tsx, **/*.jsx, components/**/*
4---
5 
6# React Best Practices
7 
8## Component Structure
9- Use functional components over class components
10- Keep components small and focused
11- Extract reusable logic into custom hooks
12- Use composition over inheritance
13- Implement proper prop types with TypeScript
14- Split large components into smaller, focused ones
15 
16## Hooks
17- Follow the Rules of Hooks
18- Use custom hooks for reusable logic
19- Keep hooks focused and simple
20- Use appropriate dependency arrays in useEffect
21- Implement cleanup in useEffect when needed
22- Avoid nested hooks
23 
24## State Management
25- Use useState for local component state
26- Implement useReducer for complex state logic
27- Use Context API for shared state
28- Keep state as close to where it's used as possible
29- Avoid prop drilling through proper state management
30- Use state management libraries only when necessary
31 
32## Performance
33- Implement proper memoization (useMemo, useCallback)
34- Use React.memo for expensive components
35- Avoid unnecessary re-renders
36- Implement proper lazy loading
37- Use proper key props in lists
38- Profile and optimize render performance
39 
40## Forms
41- Use controlled components for form inputs
42- Implement proper form validation
43- Handle form submission states properly
44- Show appropriate loading and error states
45- Use form libraries for complex forms
46- Implement proper accessibility for forms
47 
48## Error Handling
49- Implement Error Boundaries
50- Handle async errors properly
51- Show user-friendly error messages
52- Implement proper fallback UI
53- Log errors appropriately
54- Handle edge cases gracefully
55 
56## Testing
57- Write unit tests for components
58- Implement integration tests for complex flows
59- Use React Testing Library
60- Test user interactions
61- Test error scenarios
62- Implement proper mock data
63 
64## Accessibility
65- Use semantic HTML elements
66- Implement proper ARIA attributes
67- Ensure keyboard navigation
68- Test with screen readers
69- Handle focus management
70- Provide proper alt text for images
71 
72## Code Organization
73- Group related components together
74- Use proper file naming conventions
75- Implement proper directory structure
76- Keep styles close to components
77- Use proper imports/exports
78- Document complex component logic