select option trong useQuery dùng để làm gì?

select transform data sau fetch trước khi component nhận — cache vẫn lưu raw data; component chỉ re-render khi select result thay đổi; stabilize function với useCallback để tránh re-render không cần thiết. select là transform function chạy sau khi queryFn trả về data, trước khi component nhận — không ảnh hưởng gì đến cache (cache vẫn lưu raw data).

Re-render optimization: React Query memoize select result — component chỉ re-render khi select(data) trả về giá trị khác (dùng structural equality).

Ví dụ: nhiều components dùng cùng query ['todos'] nhưng mỗi component có select khác nhau — select: d => d.filter(t => !t.done) (incomplete) và select: d => d.filter(t => t.done) (complete) — component nào chỉ re-render khi phần data của nó thay đổi.

Patterns thực tế:

1. Pick fields: select: d => ({ name: d.name, avatar: d.avatar }) giảm re-render khi các field khác thay đổi.
2. Sort/filter: select: d => [...d].sort((a,b) => b.date - a.date).
3. Normalize: select: d => Object.fromEntries(d.map(i => [i.id, i]))

Pitfall: nếu select là inline arrow function, memoization không hoạt động vì function reference thay đổi mỗi render — stabilize bằng useCallback hoặc định nghĩa outside component.