React Component Pro
You build production-grade React components that are reusable, accessible, and performant.
Component Principles
- Composition over inheritance — Build with small, composable pieces
- Single responsibility — One component, one purpose
- Props down, events up — Data flows down, actions flow up
- Controlled > Uncontrolled — Parent controls state when possible
- Accessibility first — ARIA attributes, keyboard navigation, semantic HTML
Component Patterns
Compound Components
<Select value={value}
<Select.Trigger>Choose option</Select.Trigger>
<Select.Content>
<Select.Item value="a">Option A</Select.Item>
<Select.Item value="b">Option B</Select.Item>
</Select.Content>
</Select>
Custom Hooks
function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay)
return () => clearTimeout(timer)
}, [value, delay])
return debouncedValue
}
Render Props / Children as Function
<DataFetcher url="/api/users">
{({ data, loading, error }) => (
loading ? <Spinner /> : <UserList users={data} />
)}
</DataFetcher>
Performance Optimization
| Problem |
Solution |
| Unnecessary re-renders |
React.memo, useMemo, useCallback |
| Heavy computations |
useMemo with proper deps |
| Large lists |
Virtualization (react-window) |
| Code splitting |
React.lazy + Suspense |
| State updates causing full re-render |
Local state, context splitting |
TypeScript Patterns for Components
// Props with children
interface CardProps {
title: string
variant?: 'default' | 'outlined' | 'elevated'
children: React.ReactNode
}
// Forwarded ref
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ label, ...props }, ref) => (
<div>
<label>{label}</label>
<input ref={ref} {...props} />
</div>
)
)
// Generic component
interface ListProps<T> {
items: T[]
renderItem: (item: T) => React.ReactNode
}
Accessibility Checklist
1---2name: react-component-pro3description: Build reusable, accessible, performant React components with hooks, composition patterns, and modern best practices. Use when building React UIs, creating component libraries, or optimizing React performance.4license: CC0-1.05---67# React Component Pro89You build production-grade React components that are reusable, accessible, and performant.1011## Component Principles12131. **Composition over inheritance** — Build with small, composable pieces142. **Single responsibility** — One component, one purpose153. **Props down, events up** — Data flows down, actions flow up164. **Controlled > Uncontrolled** — Parent controls state when possible175. **Accessibility first** — ARIA attributes, keyboard navigation, semantic HTML1819## Component Patterns2021### Compound Components22```tsx23<Select value={value} onChange={onChange}>24 <Select.Trigger>Choose option</Select.Trigger>25 <Select.Content>26 <Select.Item value="a">Option A</Select.Item>27 <Select.Item value="b">Option B</Select.Item>28 </Select.Content>29</Select>30```3132### Custom Hooks33```tsx34function useDebounce<T>(value: T, delay: number): T {35 const [debouncedValue, setDebouncedValue] = useState(value)36 37 useEffect(() => {38 const timer = setTimeout(() => setDebouncedValue(value), delay)39 return () => clearTimeout(timer)40 }, [value, delay])41 42 return debouncedValue43}44```4546### Render Props / Children as Function47```tsx48<DataFetcher url="/api/users">49 {({ data, loading, error }) => (50 loading ? <Spinner /> : <UserList users={data} />51 )}52</DataFetcher>53```5455## Performance Optimization5657| Problem | Solution |58|---|---|59| Unnecessary re-renders | `React.memo`, `useMemo`, `useCallback` |60| Heavy computations | `useMemo` with proper deps |61| Large lists | Virtualization (react-window) |62| Code splitting | `React.lazy` + `Suspense` |63| State updates causing full re-render | Local state, context splitting |6465## TypeScript Patterns for Components6667```tsx68// Props with children69interface CardProps {70 title: string71 variant?: 'default' | 'outlined' | 'elevated'72 children: React.ReactNode73}7475// Forwarded ref76const Input = React.forwardRef<HTMLInputElement, InputProps>(77 ({ label, ...props }, ref) => (78 <div>79 <label>{label}</label>80 <input ref={ref} {...props} />81 </div>82 )83)8485// Generic component86interface ListProps<T> {87 items: T[]88 renderItem: (item: T) => React.ReactNode89}90```9192## Accessibility Checklist93- [ ] Semantic HTML (`button` not `div onClick`)94- [ ] ARIA labels for interactive elements95- [ ] Keyboard navigation (Tab, Enter, Escape)96- [ ] Focus management (modals, dropdowns)97- [ ] Color contrast ≥ 4.5:198- [ ] Screen reader tested
luokai0