React Rules
React and Next.js CLI tools for creating, building, and deploying modern web applications and components.
3 rules
Component Design Patterns
Beginner
Follow consistent React component patterns — function components only, proper prop typing with TypeScript, composition over inheritance, and clear component file structure.
globs: **/*.tsx, **/*.jsx, **/components/**
components, function-components, composition, typescript
View Rule
Hooks Rules and Custom Hook Patterns
Intermediate
Follow React hooks rules strictly — no conditional hooks, proper dependency arrays, extract reusable logic into custom hooks with the use- prefix, and avoid stale closures.
globs: **/*.tsx, **/*.jsx, **/hooks/**
hooks, custom-hooks, useEffect, dependencies
View Rule
React Performance Optimization Rules
Advanced
Apply React performance optimizations correctly — avoid premature optimization, use React.memo sparingly, proper key usage in lists, lazy loading, and prevent unnecessary re-renders.
globs: **/*.tsx, **/*.jsx
performance, memo, useMemo, useCallback
View Rule