(null);
// Message handler
useEffect(() => {
if (!websocket) return;
websocket.onmessage = (event) => {
const message = JSON.parse(event.data);
handleWebSocketMessage(message, {
setMessages,
setFiles,
setIsGenerating,
// ... other setters
});
};
}, [websocket]);
return {
messages,
files,
isGenerating,
websocket,
sendMessage: (text) => {
websocket?.send(JSON.stringify({ type: 'USER_MESSAGE', text }));
}
};
}
```
---
## Rendering Optimization
### **1. useMemo for Expensive Computations**
```typescript
const sortedFiles = useMemo(() => {
return files.sort((a, b) => a.path.localeCompare(b.path));
}, [files]);
```
### **2. useCallback for Event Handlers**
```typescript
const handleFileClick = useCallback((fileId: string) => {
setSelectedFile(files.find(f => f.id === fileId));
}, [files]);
```
### **3. React.memo for Pure Components**
```typescript
export const FileTreeNode = memo(({ file, onSelect }: Props) => {
return (
onSelect(file.id)}>
{file.name}
);
});
```
### **4. Virtual Scrolling for Large Lists**
```typescript
// For 1000+ items
import { useVirtualizer } from '@tanstack/react-virtual';
const virtualizer = useVirtualizer({
count: apps.length,
getScrollElement: () => containerRef.current,
estimateSize: () => 200, // Card height
});
```
---
## Data Fetching Patterns
### **1. Single Resource**
```typescript
// /hooks/use-app.ts
export function useApp(appId?: string) {
const [app, setApp] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
if (!appId) return;
setLoading(true);
apiClient.getApp(appId)
.then(setApp)
.catch(setError)
.finally(() => setLoading(false));
}, [appId]);
return { app, loading, error, refetch };
}
```
### **2. Paginated List**
```typescript
// /hooks/use-apps.ts
export function useApps(filters?: AppFilters) {
const [apps, setApps] = useState([]);
const [hasMore, setHasMore] = useState(true);
const currentPageRef = useRef(1);
const isLoadingMoreRef = useRef(false);
const fetchApps = useCallback(async (loadMore = false) => {
if (isLoadingMoreRef.current) return;
isLoadingMoreRef.current = true;
const page = loadMore ? currentPageRef.current + 1 : 1;
const result = await apiClient.getApps({ ...filters, page });
if (loadMore) {
setApps(prev => [...prev, ...result.apps]);
} else {
setApps(result.apps);
}
setHasMore(result.hasMore);
currentPageRef.current = page;
isLoadingMoreRef.current = false;
}, [filters]);
const loadMore = () => fetchApps(true);
return { apps, hasMore, loadMore };
}
```
### **3. Infinite Scroll**
```typescript
const { apps, hasMore, loadMore } = useApps();
const observerRef = useRef();
const sentinelRef = useRef(null);
useEffect(() => {
observerRef.current = new IntersectionObserver(entries => {
if (entries[0].isIntersecting && hasMore) {
loadMore();
}
});
if (sentinelRef.current) {
observerRef.current.observe(sentinelRef.current);
}
return () => observerRef.current?.disconnect();
}, [hasMore, loadMore]);
return (
{apps.map(app =>
)}
{/* Sentinel element */}