react-component-patterns.mdc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
---description: "Use when working with React components, hooks, or JSX files"alwaysApply: false--- ## React Component Guidelines ### Functional Components Only Always use functional components with hooks. Never use class components. ```tsx// ✅ Goodexport function UserProfile({ user }: UserProfileProps) { const [isEditing, setIsEditing] = useState(false); return <div>...</div>;} // ❌ Badclass UserProfile extends Component { render() { return <div>...</div>; }}``` ### Props Interface Pattern Define props interfaces inline above the component: ```tsxinterface ButtonProps { variant: "primary" | "secondary"; onClick: () => void; children: React.ReactNode;} export function Button({ variant, onClick, children }: ButtonProps) { // ...}``` ### Custom Hooks Extract reusable logic into custom hooks prefixed with `use`: ```tsxfunction useLocalStorage<T>(key: string, initialValue: T) { // Implementation}```
MDC (Frontmatter)Markdown