use - mrsekut-p

use

2022/10/13にRFCが出た

特殊なReact Hooksという位置づけ

if文の中で使っても良い

async Server Componentsにおけるawaitとほぼ同じノリで使える

Server Functionsは呼べないのかmrsekut.icon

code:ts

const use: <T>(promise: Promise<T>) => T;

code:ts

function Note({id, shouldIncludeAuthor}) {

const note = use(fetchNote(id));

let byline = null;

if (shouldIncludeAuthor) {

const author = use(fetchNoteAuthor(note.authorId));

byline = <h2>{author.displayName}</h2>;

}

return (

<div>

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

{byline}

</div>

);

}

Promiseから中身を取り出す

primitiveに実装されたreact-queryみたいなイメージかmrsekut.icon

(ただしcacheの機能はない)

雑に言うと、今まではuseEffect、useStateでやってたことが1つのhooksでできる

その解決策の一つとして、cache query系libraryがあったが、もっとprimitiveに提供される

「Promiseをthrowする」というReact特有のプロトコルに縛られる必要が無くなり、単なるPromiseを出力すれば良くなります。これにより、ライブラリ側はもはやReact専用のAPIを提供する必要がなくなり、ライブラリ側にもメリットがあります。ref

↑ここでの「ライブラリ」とはreact-queryなどのこと

cache query系libraryはcacheの管理のみを行い、suspendするかどうかの制御はReactに任す