React 19の機能を見る会のメモ

2024年7月19日

React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。

#React

公式ドキュメントを見て気になった機能を掘り下げていけば十分だと思います。

https://ja.react.dev/blog/2024/04/25/react-19

ただ、1人だとやる気がおきない方や前提知識が足りない方に向けて、React 19の機能を大まかに紹介する会を実施しました。

Action
- 非同期トランジションを使用する関数をActionと呼んでいる。
useTransitonとAction
- React 19からstartTransitionに非同期関数を渡せるようになる。
  - 遅延処理を非同期トランジションに出来る。
useActionState
- useReducer + useTransitionみたいなAPI。
- アクションの一般的なユースケースを実現するために生えた。
- useState+useTransitionで記述されるような箇所は置き換えられる。
```
const [state, submitAction, isPending] = useActionState(
  async (prevState, payload) => {
    // ...
    return nextState;
  },
  initialState
);
```
<form>アクション
- 今までonSubmitを利用していた場面で、action属性を利用できる。
- action : (formData: FormData) ⇒ void
  - formDataオブジェクトが引数から取れる。
- <form>アクションが成功すると、非制御コンポーネントの場合フォームが自動的にリセットされる。
  - requestFormReset：手動リセットが必要な場合に利用できる。
- useActionStateとの併用が想定されていそう。
useFormStatus
- 自分の所属するform要素の状態を取得できる。
- useFormStatus(): { isPending, data }
  - 送信中のデータに応じて表示を切り替えるということも可能。
- button要素を<form>アクションが完了するまでdisabledにしたい場合、useFormStatusを利用すれば、propsの受け渡しだけでなく、useActionStateやuseTransitonも不要。
useOptimistic
- 楽観的な更新を簡単に行うためのもの。
use
- リソースを読み込むためのもの。
- Suspenseの利用が前提。
- Promiseを渡すと、解決された結果が返る。
  - 解決するまではPromiseがthorwされる。
- レンダー中にPromiseを作成してuseに入れたり、useの中でPromiseを作るようなことは出来ない。
- 他のフックと異なり条件分岐中でも呼ぶことも出来る。
- Contextを引数に取ることも出来る。
Context.Providerの代わりにContextを利用する。
- ContextをそのままProviderとして利用できるようになった。

ref用のクリーンアップ関数

ref コールバックからクリーンアップ関数を返せるように。
これにより確実に最新のnodeを利用できるようになる。

<div
  ref={node => {
    const controller = new AbortController();
    node.addEventListerner(
      "click",
      () => {
        // ...
      },
      { signal: controller.signal }
    );

    return () => {
      controller.abort();
    };
  }}
/>

useDeferredValueの第2引数
- 初期値を設定できるようになった。
- 値の変化を遅延・トランジション化させるもの。
<title>、<meta>、<script>
- react-helmetなどのライブラリのようなことが出来る。
<link> 、<style>
- スタイルの重複排除や、スタイルシートが読み込まれるまでコンポーネントをサスペンドなどをサポートしている。
<script>
- 非同期スクリプトの重複解消処理などをサポートしている。
ref props
- forwardRefが非推奨になり、refをpropsとして渡せるように。
リソースのプリロードのサポート
- リソースの読み込みやプリロードのための新しいAPIがたくさん追加された。
  - https://ja.react.dev/reference/react-dom#resource-preloading-apis
スプレッド構文をpropsの受け渡しに用いると、JSX要素の作成の高速化の恩恵を受けられなくなる。
- https://github.com/facebook/react/pull/28768