\n
\n );\n};\n```\n\n**NEVER make direct API calls for auth** - always use `useAuth` hook.\n\n---\n\n## Forms with React Hook Form\n\n### Basic Form\n\n```typescript\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';\nimport { TextField, Button } from '@mui/material';\nimport { useMuiSnackbar } from '@/hooks/useMuiSnackbar';\n\n// Zod schema for validation\nconst formSchema = z.object({\n username: z.string().min(3, 'Username must be at least 3 characters'),\n email: z.string().email('Invalid email address'),\n age: z.number().min(18, 'Must be 18 or older'),\n});\n\ntype FormData = z.inferLogged in as: {user.email}
\nUsername: {user.username}
\nRoles: {user.roles.join(', ')}
\n- \n {filteredUsers.map(user => (\n
Stats
\nTotal: {statsQuery.data.total}
\nActive Users
\nCount: {usersQuery.data.length}
\nRecent Activity
\nEvents: {activityQuery.data.length}
\n\n User: {userId}\n
\n );\n};\n\nexport default MyComponent;\n```\n\n**Key Points:**\n- Props interface defined separately with JSDoc comments\n- `React.FCMy Component
\n \n{item.name}
\n ))}\n onSelect(data[0].id)}>\n {/* Content */}\n
\n );\n};\n```\n\n### Avoid Prop Drilling\n\n**Use context for deep nesting:**\n```typescript\n// ❌ AVOID - Prop drilling 5+ levels\n\n \n {data.name}
;\n};\n\n// Wrap in Suspense boundary\n prefetch(blogId, id)}>\n View\n
\n```\n\n### Cache Access Without Fetching\n\n```typescript\nexport function useEntityFromCache(blogId: number, entityId: number) {\n const queryClient = useQueryClient();\n\n // Get from cache, don't fetch if missing\n const directCache = queryClient.getQueryData{data.title}
\n{data.description}
\n{count}
;\n};\n```\n\n### Cleanup Event Listeners\n\n```typescript\nuseEffect(() => {\n const handleResize = () => {\n console.log('Resized');\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize); // Cleanup!\n };\n}, []);\n```\n\n### Abort Controllers for Fetch\n\n```typescript\nuseEffect(() => {\n const abortController = new AbortController();\n\n fetch('/api/data', { signal: abortController.signal })\n .then(response => response.json())\n .then(data => setState(data))\n .catch(error => {\n if (error.name === 'AbortError') {\n console.log('Fetch aborted');\n }\n });\n\n return () => {\n abortController.abort(); // Cleanup!\n };\n}, []);\n```\n\n**Note**: With TanStack Query, this is handled automatically.\n\n---\n\n## Form Performance\n\n### Watch Specific Fields (Not All)\n\n```typescript\nimport { useForm } from 'react-hook-form';\n\nexport const MyForm: React.FC = () => {\n const { register, watch, handleSubmit } = useForm();\n\n // ❌ AVOID - Watches all fields, re-renders on any change\n const formValues = watch();\n\n // ✅ CORRECT - Watch only what you need\n const username = watch('username');\n const email = watch('email');\n\n // Or multiple specific fields\n const [username, email] = watch(['username', 'email']);\n\n return (\n \n );\n};\n```\n\n---\n\n## List Rendering Optimization\n\n### Key Prop Usage\n\n```typescript\n// ✅ CORRECT - Stable unique keys\n{items.map(item => (\n Child
;\n\n return Child
;\n\nexport const Parent: React.FC = () => {\n return {config.title}
;\n }, [config.title]);\n\n return My Route Content
;\n}\n```\n\n### With Breadcrumb Loader\n\n```typescript\nexport const Route = createFileRoute('/my-route/')({\n component: MyRoutePage,\n loader: () => ({\n crumb: 'My Route Title',\n }),\n});\n```\n\nBreadcrumb appears in navigation/app bar automatically.\n\n### With Data Loader\n\n```typescript\nexport const Route = createFileRoute('/my-route/')({\n component: MyRoutePage,\n loader: async () => {\n // Can prefetch data here\n const data = await api.getData();\n return { crumb: 'My Route', data };\n },\n});\n```\n\n### With Search Params\n\n```typescript\nexport const Route = createFileRoute('/search/')({\n component: SearchPage,\n validateSearch: (search: RecordTitle
\n{prop}
;\n};\n\n// For custom hooks\nfunction useMyData(id: number): { data: Data; isLoading: boolean } {\n const [data, setData] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n\n return { data: data!, isLoading };\n}\n```\n\n---\n\n## Type Imports\n\n### Use 'type' Keyword\n\n```typescript\n// ✅ CORRECT - Explicitly mark as type import\nimport type { User } from '~types/user';\nimport type { Post } from '~types/post';\nimport type { SxProps, Theme } from '@mui/material';\n\n// ❌ AVOID - Mixed value and type imports\nimport { User } from '~types/user'; // Unclear if type or value\n```\n\n**Benefits:**\n- Clearly separates types from values\n- Better tree-shaking\n- Prevents circular dependencies\n- TypeScript compiler optimization\n\n---\n\n## Component Prop Interfaces\n\n### Interface Pattern\n\n```typescript\n/**\n * Props for MyComponent\n */\ninterface MyComponentProps {\n /** The user ID to display */\n userId: number;\n\n /** Optional callback when action completes */\n onComplete?: () => void;\n\n /** Display mode for the component */\n mode?: 'view' | 'edit';\n\n /** Additional CSS classes */\n className?: string;\n}\n\nexport const MyComponent: React.FC...
;\n};\n```\n\n**Key Points:**\n- Separate interface for props\n- JSDoc comments for each prop\n- Optional props use `?`\n- Provide defaults in destructuring\n\n### Props with Children\n\n```typescript\ninterface ContainerProps {\n children: React.ReactNode;\n title: string;\n}\n\n// React.FC automatically includes children type, but be explicit\nexport const Container: React.FC\n
\n );\n};\n```\n\n---\n\n## Utility Types\n\n### Partial{title}
\n {children}\n\n {items.map((item, index) => (\n
\n );\n}\n\n// Usage\n{renderItem(item)}
\n ))}\n