Reactのuseについて

何か

useはReactの特殊なHook

シグネチャ: const use: <T>(promise: Promise<T>) => T;

Reactのコンポーネント内でawaitのようにPromiseの中身を取り出すことができるhook

なぜ使うか

SuspenseのようにPromiseを解決してコンポーネントの再レンダリングを行ってもらうために使う

どのように使うか

下記の例ではuseがPromise<T>を返すfetchNote(id)をからTを取り出しconst note`に適用しその結果を受けてレンダリングしてくれるようになる

code:tsx

function Note({ id }) {

const note = use(fetchNote(id));

return (

<div>

<h1>{note.title}</h1>

</div>

);

}

いつ使うか(具体的な事例など)

今までuseEffectとuseStateを使ってデータを取得しjsxにレンダリングしていた箇所などがシンプルに使えるようになる

参考