use

公式ドキュメント ↗

const userPromise = useMemo(() => fetchUser(id), [id]); // idが変わった時だけ新しいPromiseを作る

function UserCard({ userPromise }) {
  const user = use(userPromise); // レンダー中に直接読み取る。まだならSuspenseに任せる
  return <p>{user.name}</p>;
}

if文の中や、途中でreturnした後でも呼べる

// 通常のフック: 条件分岐の中で呼ぶとルール違反(呼び出し順序が壊れる)
if (show) {
  const value = useSomething(); // ❌ Rules of Hooks違反
}

// use: 早期returnの後や条件分岐の中でも呼べる
if (!show) return <p>(非表示)</p>;
const detail = use(detailPromise); // ✅ 問題ない

普通のフックはコンポーネントの一番上で、条件分岐なしに呼ぶ決まりがある。useだけはif文の中や、早めにreturnした後でも呼べる。とはいえ多用すると読みづらくなるので、本当に必要な場面に絞るのがよい。

Contextも同じように読める

const label = useContext(LabelContext); // 無条件でしか呼べない

if (show) {
  const label = use(LabelContext); // 条件分岐の中でもOK
  return <p>{label}</p>;
}

use(Context)はuseContext(Context)とほぼ同じ結果になる。違うのは、こちらも条件分岐やループの中で呼べる点。今あるContextをそのまま使い回せる。