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.

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} onChange={onChange}>
  <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

Semantic HTML (button not div onClick)
ARIA labels for interactive elements
Keyboard navigation (Tab, Enter, Escape)
Focus management (modals, dropdowns)
Color contrast ≥ 4.5:1
Screen reader tested

react-component-pro