React v19アナウンスざっくりまとめ
React v19(Beta) リリースアナウンス を(自分用に)まとめる。雑なのでご指摘ウェルカムです。
新規
Actions
- 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サポート
- 正直従来どれくらいサポートできていたのかしらないのでわからない
アプグレ
所感
- Next.jsあたりが先行して18 canaryを取り入れまくったので既知なものが多かった
- 改善系でおや?となる部分と助かる〜となる部分が混ざっていた