Select → Useful for API Responses

Most APIs return way more data than you need:

// 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

// ❌ 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:

// 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 })
})

Performance Optimizations with React Query

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

Select → Useful for API Responses

Tracked Properties → Easy to Mess Up

Request Cancellation → Critical for Search

Command Palette

Comments

More from this blog

Select → Useful for API Responses

Tracked Properties → Easy to Mess Up

Request Cancellation → Critical for Search