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