UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【React】ざっくりReact19の新機能を確認

React

React18からの2年ぶりの大型アップデートとなるReact19の新機能を確認した

Actions（server actions）

Next.jsですでに使っている機能のため割愛

【技術本まとめ】実践Next.jsを読んでのメモ - Server Action とパフォーマンス - UGA Boxxx

useActionState

useFormStateが名前が変わってuseActionStateになった

本来formとは関係なかったが「Form」という名前を使っていて、Server Actionsに関係あるので「Action」という名前に変えた

ReactDOMからではなく、Reactからimportする

また、リターンの３つ目の要素としてisPendingが返されるようになった

const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {
   ...
});

useFormStatus

これもNext.jsですでに使えている、Formの状態を保持するhooks

変わらずReactDOMから提供される

useOptimistic

これもNext.jsですでに使えているもの、Web APIリクエストが成功する前提で、楽観的に先んじてUIを更新した状態で表示させる

use

Promiseをthrowするとsuspenseで待機してくれるが、PromiseをthrowするAPIがなかったので、throwするAPIができた

useはhooksではないので、hooksのルールに則る必要はなく、early returnの後でもloopの中でもどこで呼んでもいい

サーバーコンポーネント周り

これもNext.jsですでに使われているので割愛

ref as a prop

親から渡されたrefを子コンポーネント側でforwardRefでラップする必要がなくなり、ただのpropsとして受け取れるようになった

as a provider

createContextした後に、<Context.Provider>で使っていたのを<Context>だけで良くなった

余談で、useContextはもう使う必要なくuse(Context)で良くなった（hooksのルールに則らずどこで呼び出せるようになったため）

これは聞いた話しだが、元々contextはhooksのルールに則る必要性はなかったが、他のhooksと揃えるためにルールに則っていただけだった

useができたのでuse(Context)で良くなり扱いやすくなった

useDeferredValue

useDeferredValueの第二引数に初期値を渡せるようになった

Support for Document Metadata

メタデータ<title>, <meta>, <link>をどこで書いても、レンダリング後にはheadの下に置いてくれるようになる

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

Support for stylesheets, async scripts

アセットを扱うタグ<style>, <link>, <script>などもコンポーネント ツリー内の任意の場所でレンダリングできるようになった

Support for preloading resources

リソースのプリロード用の新しいAPIができた

  • prefetch: DNS接続先となる DNS ドメイン名の IP アドレスをプリフェッチ
  • preconnect: どのようなリソースが必要になるかまだ分からない場合でも、リソースの要求元となるサーバーに接続
  • preload: 使用する予定のスタイルシート、フォント、画像、または外部スクリプトを取得
  • preloadModule: 使用する予定の ESM モジュールを取得
  • preinit: 外部スクリプトを取得して評価したり、スタイルシートを取得して挿入したり
  • preinitModule: ESMモジュールを取得して評価
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
function MyComponent() {
  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
  prefetchDNS('https://...') // when you may not actually request anything from this host
  preconnect('https://...') // when you will request something but aren't sure what
}