Async atoms trong Jotai hoạt động như thế nào?

Async read atom suspend tự nhiên trong khi fetch — component dùng useAtomValue(userAtom) cần được bọc <Suspense>.

Đây là tích hợp React Suspense tự nhiên nhất trong các thư viện state.

const userAtom = atom(async (get) => {
  const id = get(userIdAtom)
  return await fetchUser(id)
})

loadable(userAtom) từ jotai/utils trả về { state: 'loading'|'hasData'|'hasError', data, error } — dùng khi muốn tự kiểm soát loading UI thay vì Suspense.
atomWithQuery từ jotai-tanstack-query nhúng TanStack Query vào atom: atomWithQuery(() => ({ queryKey: ['posts'], queryFn: fetchPosts })).

Lưu ý: async atom re-fetch mỗi khi atom phụ thuộc thay đổi và không có stale-time sẵn như React Query — cần chiến lược cache phức tạp thì dùng atomWithQuery.

Xem toàn bộ State Management cùng filter theo level & chủ đề con.

Mở danh sách State Management

Async read atom suspend tự nhiên trong khi fetch — component dùng useAtomValue(userAtom) cần được bọc <Suspense>.

Đây là tích hợp React Suspense tự nhiên nhất trong các thư viện state.

const userAtom = atom(async (get) => {
  const id = get(userIdAtom)
  return await fetchUser(id)
})

loadable(userAtom) từ jotai/utils trả về { state: 'loading'|'hasData'|'hasError', data, error } — dùng khi muốn tự kiểm soát loading UI thay vì Suspense.
atomWithQuery từ jotai-tanstack-query nhúng TanStack Query vào atom: atomWithQuery(() => ({ queryKey: ['posts'], queryFn: fetchPosts })).

Lưu ý: async atom re-fetch mỗi khi atom phụ thuộc thay đổi và không có stale-time sẵn như React Query — cần chiến lược cache phức tạp thì dùng atomWithQuery.