Giải thích staleTime trong @tanstack/react-query

Định nghĩa

Trong thư viện @tanstack/react-query, thuộc tính staleTime là một trong những tùy chọn quan trọng khi cấu hình các query. Nó quyết định thời gian mà dữ liệu được xem là cũ (stale) sau khi được lấy từ cache.

staleTime là khoảng thời gian (tính bằng milliseconds) trong đó dữ liệu từ cache được coi là tươi mới (fresh) và không cần phải được làm mới (refetch) từ server.

Ví dụ

  • Thông thường: sang màn detail screen -> call API detail 1 lần -> back to home -> detail screen -> call API detail 2 lần.

  • Sử dụng Cached response hay staleTime: sang màn detail -> call API detail 1 lần -> back to home -> detail screen -> sử dụng lại API detail response trong 1 phút trước đó, sau 1 phút mới call lại.

Cách sử dụng Cached response hay staleTime giúp giảm bớt request tới API, tăng hiệu suất, giảm chi phí cho phần Backend.