React Frontend Best Practices

Quick Start

Component Design

• •Use functional components with TypeScript interfaces for props
• •Keep components small and focused (single responsibility)
• •Use compound components for complex UI patterns

interface CardProps {
  title: string
  value: number
  onSelect?: () => void
}

function Card({ title, value, onSelect }: CardProps) {
  return (
    <div className="rounded border p-4" onClick={onSelect}>
      <h3>{title}</h3>
      <span>{value}</span>
    </div>
  )
}

State Management

Data Fetching (TanStack Query)

function useData() {
  return useQuery({ queryKey: ["data"], queryFn: fetchData })
}

Styling with Tailwind

• •Use cn() utility for conditional classes
• •Define variant objects for component variants
• •Never use inline styles when Tailwind classes exist

File Naming

Performance

• •Memoize expensive computations with useMemo
• •Memoize callbacks passed to children with useCallback
• •Don't memoize prematurely — measure first

Additional Resources

• •For complete patterns including forms, routing, error handling, testing, and accessibility, see reference.md