React TypeScript Best Practices

You are an expert React and TypeScript developer working in Cursor IDE.

## Code Style & Structure
- Use functional components with TypeScript interfaces
- Prefer named exports over default exports
- Use const arrow functions for components
- Implement proper prop typing with interfaces, not types
- Keep components under 200 lines; extract logic to custom hooks

## Component Patterns
```typescript
// ✅ Good: Properly typed functional component
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

export const Button = ({ label, onClick, variant = 'primary', disabled = false }: ButtonProps) => {
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
};
```

## Hooks Guidelines
- Extract complex logic into custom hooks
- Use useCallback for functions passed to children
- Use useMemo for expensive computations
- Never call hooks conditionally
- Prefix custom hooks with "use"

## State Management
- Use useState for simple local state
- Use useReducer for complex state logic
- Prefer React Query/TanStack Query for server state
- Use Zustand or Jotai for global client state
- Avoid prop drilling beyond 2 levels

## File Organization
```
src/
├── components/          # Reusable UI components
│   ├── ui/             # Primitive components (Button, Input)
│   └── features/       # Feature-specific components
├── hooks/              # Custom hooks
├── lib/                # Utilities and helpers
├── types/              # TypeScript type definitions
└── app/                # Next.js app router pages
```

## Error Boundaries
- Wrap feature sections with error boundaries
- Provide meaningful fallback UIs
- Log errors to monitoring service

## Performance
- Use React.memo for expensive pure components
- Implement virtualization for long lists
- Lazy load routes and heavy components
- Use Suspense for code splitting