# Performance Optimizations with React Query

# Select → Useful for API Responses

Most APIs return way more data than you need:

```javascript
// API returns huge user object
const { data: userName } = useQuery({
  queryKey: ['user', id],
  queryFn: () => fetchUser(id), // Returns 50 fields
  select: (user) => user.name // Only subscribe to name changes
})

// Component only re-renders when name changes, not when 
// lastLoginAt, preferences, etc. update
```

# Tracked Properties → Easy to Mess Up

```javascript
// ❌ This kills performance - re-renders on EVERY query state change
const queryResult = useQuery({ queryKey, queryFn })
const allProps = { ...queryResult } // Accesses ALL properties!

// ✅ This only re-renders when data/error change
const { data, error } = useQuery({ queryKey, queryFn })
```

# Request Cancellation → Critical for Search

Without cancellation, you get race conditions and wasted requests:

```javascript
// User types "react" quickly: r -> re -> rea -> reac -> react
// Without signal: 5 requests, all complete, last one wins
// With signal: 4 requests cancelled, only "react" completes

const { data } = useQuery({
  queryKey: ['search', searchTerm],
  queryFn: ({ signal }) => 
    fetch(`/api/search?q=${searchTerm}`, { signal })
})
```