React v19アナウンスざっくりまとめ

目次

    React v19(Beta) リリースアナウンス を(自分用に)まとめる。雑なのでご指摘ウェルカムです。

    新規

    Actions

  • いままでAPIリクエストの状態、エラーを取りつつ、楽観的更新(更新している間UIは更新後の値をだすアレ、swrとかからの輸入)などを手動で行っていたのを以下のAPIで隠蔽できるように
    • useTransition: リクエストの状態
    • useOptimistic: 楽観的更新
    • useActionState: useTransitionのやること、エラーの補足、formのデータ送信あたりのケースを全部制御 → かつての useFormState (使ったことないので知らない)
    • useFormStatus: 親のフォームの状態を子で取れる?
    • use: promiseを宣言的に書けるやつ。use〇〇と同じ書き方でpromiseを扱える
  • RSC

    • server components: canaryで構築されていたreactベースのFWとの互換性持たせた
    • server actions: clientの中にserverのコード埋め込むアレ

    改善

    • refそのままpropsで渡せるよ(forwardRefいらなくなる)
    • hydrationエラーの詳細でるようになるよ ヤッター!
    • Context が Context.Provider の代わりになる
      • むしろ今までなんで後者だったのか
    • refでcleanupできる
      • useeffectのreturnのやつ
    • useDefferedValue に初期値はいる
      • そもそもしらないフック 状態更新後(再レンダリング後)の値を取れるフック
    • react-helmet みたく metadataをreturnの中に書けるように
      • 個人的にこれは良くない
    • styleの読み込まれる順番を制御できるように
    • 重複したスタイルは読み込まないように
    • async な script を重複して読み込まないように
    • metadata を API 使って関数で コンポーネントのトップレベル で呼べるよ
      • こっちはreact-helmetみたいなのよりも良い
    • 3rd partyのhtml埋め込みとかで起きていたhydrationエラーを抑制(放置してくれる)
      • シェアボタン系でエラー飛んでたのがなくなって良さそう
    • エラーが重複したらまとめる
    • Custom Elementサポート
      • 正直従来どれくらいサポートできていたのかしらないのでわからない

    アプグレ

  • https://react.dev/blog/2024/04/25/react-19-upgrade-guide みて
  • 所感

    • Next.jsあたりが先行して18 canaryを取り入れまくったので既知なものが多かった
    • 改善系でおや?となる部分と助かる〜となる部分が混ざっていた
    この記事を共有する