tomevault-io 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"
<h3>{title}</h3>
<span>{value}</span>
</div>
)
}
State Management
| State Type | Solution |
|---|---|
| Server/async data | TanStack Query |
| Form state | react-hook-form or useState |
| Local UI state | useState |
| Shared UI state | Context or Zustand |
| URL state | React Router |
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
| Type | Convention | Example |
|---|---|---|
| Components | PascalCase | DashboardCard.tsx |
| Hooks | camelCase, use prefix |
useDashboardData.ts |
| Utilities | camelCase | formatDate.ts |
| Constants | SCREAMING_SNAKE_CASE | API_BASE_URL |
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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.