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

Published at
811 words
4min read

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

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 として渡せるように。

  • リソースのプリロードのサポート

  • スプレッド構文を props の受け渡しに用いると、JSX 要素の作成の高速化の恩恵を受けられなくなる。