react
React best practices: component structure, hooks and patterns for modern web applications.
- Kind
- Rules
- Works with
- Cursor
- Languages
- TypeScript / JavaScript
- Source
- Awesome Cursor Rules @ b044f956f021
- Path
- rules/react.mdc
- License
- CC0-1.0
- Jobs
- Implementation
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# 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 …