{"filename":"react.mdc","content":"---\ndescription: \"React best practices and patterns for modern web applications\"\nglobs: **/*.tsx, **/*.jsx, components/**/*\nalwaysApply: false\n---\n# React Best Practices\n\n## Component Structure\n- Use functional components over class components\n- Keep components small and focused\n- Extract reusable logic into custom hooks\n- Use composition over inheritance\n- Implement proper prop types with TypeScript\n- Split large components into smaller, focused ones\n\n## Hooks\n- Follow the Rules of Hooks\n- Use custom hooks for reusable logic\n- Keep hooks focused and simple\n- Use appropriate dependency arrays in useEffect\n- Implement cleanup in useEffect when needed\n- Avoid nested hooks\n\n## State Management\n- Use useState for local component state\n- Implement useReducer for complex state logic\n- Use Context API for shared state\n- Keep state as close to where it's used as possible\n- Avoid prop drilling through proper state management\n- Use state management libraries only when necessary\n\n## Performance\n- Implement proper memoization (useMemo, useCallback)\n- Use React.memo for expensive components\n- Avoid unnecessary re-renders\n- Implement proper lazy loading\n- Use proper key props in lists\n- Profile and optimize render performance\n\n## Forms\n- Use controlled components for form inputs\n- Implement proper form validation\n- Handle form submission states properly\n- Show appropriate loading and error states\n- Use form libraries for complex forms\n- Implement proper accessibility for forms\n\n## Error Handling\n- Implement Error Boundaries\n- Handle async errors properly\n- Show user-friendly error messages\n- Implement proper fallback UI\n- Log errors appropriately\n- Handle edge cases gracefully\n\n## Testing\n- Write unit tests for components\n- Implement integration tests for complex flows\n- Use React Testing Library\n- Test user interactions\n- Test error scenarios\n- Implement proper mock data\n\n## Accessibility\n- Use semantic HTML elements\n- Implement proper ARIA attributes\n- Ensure keyboard navigation\n- Test with screen readers\n- Handle focus management\n- Provide proper alt text for images\n\n## Code Organization\n- Group related components together\n- Use proper file naming conventions\n- Implement proper directory structure\n- Keep styles close to components\n- Use proper imports/exports\n- Document complex component logic\n"}