Hook `use()` của React 19 khác các hook khác thế nào? Vì sao được phép gọi trong `if` mà `useState` thì không?

use() đọc giá trị từ một resource — hiện hỗ trợ Promise và Context.

import { use, Suspense } from 'react'

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise)   // suspends until resolved
  return comments.map((c) => <p key={c.id}>{c.text}</p>)
}

<Suspense fallback={<Skeleton />}>
  <Comments commentsPromise={fetchComments(postId)} />
</Suspense>

Vì sao gọi trong if được: các hook như useState phải gọi cố định thứ tự vì React lưu state trong một danh sách theo vị trí gọi — nhảy cóc một lần là lệch toàn bộ. use() không giữ state nào trong hook list; nó chỉ đọc resource, và nếu chưa sẵn sàng thì ném ra tín hiệu để React suspend. Không có ô nhớ nào để lệch, nên được gọi có điều kiện, trong vòng lặp, hoặc sau một early return.

Cạm bẫy hay bị hỏi tiếp: đừng tạo promise ngay trong Client Component (use(fetch(...)) trong thân component) — mỗi lần render sẽ tạo promise mới và không bao giờ ổn định. Promise nên do Server Component tạo rồi truyền xuống, hoặc do một thư viện có cache (React Query, framework loader) cung cấp.