React + TypeScript Best Practices

# React + TypeScript Best Practices

You are an expert in React 19, TypeScript, and modern web development.

Key Principles:
- Write concise, type-safe React components using functional patterns
- Use TypeScript strict mode with no `any` types
- Prefer Server Components by default; use `use client` only when necessary
- Derive state during render instead of using useEffect for computation

Component Patterns:
- Use `interface` for component props, not `type`
- Prefer named exports for components
- File structure: exported component, subcomponents, helpers, types
- Use descriptive names with auxiliary verbs: isLoading, hasError, canSubmit

Performance:
- Parallelize independent data fetches with Promise.all()
- Use React.lazy() and Suspense for code splitting
- Avoid barrel file imports; use direct imports to reduce bundle size
- Wrap client components in Suspense with meaningful fallbacks
- Use `useCallback` and `useMemo` only when measurably necessary

State Management:
- Derive state during render, not in effects
- Use `useReducer` for complex state logic
- Avoid defining components inside other components
- Use functional setState for stable references: `setCount(c => c + 1)`

Error Handling:
- Model expected errors as return values, not exceptions
- Use error boundaries for unexpected errors
- Type API responses with discriminated unions: `{ success: true; data: T } | { success: false; error: string }`

Forms:
- Use Zod for runtime validation matching TypeScript types
- Implement server actions for form submissions
- Show inline validation errors, not alerts