memo @240225＊
nakamoto
React の最新機能
Actions
従来Reactでform要素を使うときは基本的にonClick onSubmitを使って送信処理を行ったけれど（React Hook Formを使っててもonSubmitの属性の中にhandleSubmitを定義し処理を行う）onSubmitとかonClickは基本的にJavaScriptを必要とするフォーム送信処理であるためユーザーがJavaScriptをオフにしてたら動かない。なのでProgressive Enhancementという考え方からするとあまりよろしくなかったのが以前のReact。そこにActionsが出てきてaction属性を介するやり方ならJavaScriptをオフにしてても機能する。そっちの方がアクセシビリティもいい。
actionはブラウザ側で処理させることもできるしuse serverを使用することによってサーバー側に処理させることもできる。そこは実装者に委ねられてるけど基本的にはuse serverで行うべき。actionを使用するときはuseFormStatus useFormStateなどのReactの新しいhooksを使って状態を取得するのが一般的。formのactionはReact専用の属性ではなくHTML標準でついてるもの。ただHTML標準のform要素のactionを使うと基本的にページがリフレッシュされる（送信処理に入ってユーザーが他の処理をすることはできなくなる）けどもReactのactionを使うとトランジション（Reactの裏側）で送信されて画面全体が動かなくなることはない。actionは非同期関数もサポートしてるためトランジションでasync/awaitも使えるし処理中であるというisPendingを取得することもできる。
もし<Calendar onSelect={eventHandler}>というコンポーネントを使ってライブラリを作ってたら<Calendar selectAction={action}>のようにしてRSCでも動くようにすることが大切。
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
New Features in React Canary
React CanariesによってReactのリリース戦略が変わる。。バグがあるかも知れないけどもReactの新機能をより早く知ることができる。
Directives：use client use server
use clientを使ったらクライアント側にJSを送る
（バンドラーに<script>タグを生成するように指示する）
use serverを使ったらバンドラーに POST エンドポイント (tRPC Mutationsなど) を生成するように指示する。use serverでServer Actionsを使うと裏側では POST エンドポイントを作成してそれを呼び出してる。APIを作らずにサーバー側にリクエストを送ってるように見えるけども内部的には POST エンドポイントを自動で生成しそれを呼び出してる。
Document Metadata： <title> <meta> <link>などmetadataタグはクライアント側だけじゃなくSSRでもRSCでも同じように機能するようになった。
Asset Loading：スタイルシート、フォント、スクリプトなどの外部アセットを読み込むタイミングを調整できるようになった。イメージ的にはNext.jsはnext/scriptというスクリプトタグを使うと<script>を読み込むタイミングを調整できる。それがReact公式でもできるようになったという話。
React19ではWeb Componentのサポートのような破壊的変更を伴うけども長年の要望に応える改善も追加される。
Offscreen (renamed to Activity).
Offscreenという機能の名称がActivityに変更される。