React v18の変更内容まとめ

20220401_React v18に関する理解

1. Automatic Batching

// Before: Reactのイベントがbatchされた時のみ
// それぞれのstateのupdateごとに1回ずつ、合計2回render（描写）する。
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

// After: setTimeoutの中でのupdateをまとめて行う
// 最終的には1回のみre-renderする。
// これがbatch。
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

1. Urgent updates, Transition updates
   • Urgent updates: 画面内における「タイピング」「クリック」「キーボード押下」など、すぐにresponseが欲しいupdate。
   • Transition updates: 画面遷移の際に初めてupdateを行う場合。

例示として、ドロップダウン型のfilterを選択した時、クリックした瞬間にfilter buttonが即時応答してくれることが望ましい。けれど、実際の結果は別々に遷移する。もし結果が描写される前にfilterを変更したら、最新の結果だけを気にできるような状態にするということである。

import {startTransition} from 'react';

// Urgent update: 何がtypeされたかを表示
setInputValue(input);

// 遷移として中身のstateのupdateを管理
startTransition(() => {
  // 結果表示
  setSearchQuery(input);
});

1. Suspence

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

画面描写がまだ準備できていない時に表示する「ローディング時」のstate。

1. New Client and Server Rendering APIs

   4.1 React DOM Client

   【新規API】

   • createRoot: ReactDOM.render の代替。
   • hydrateRoot: ReactDOM.hydrate の代替。ReactDOMServer によってHTMLコンテンツがrenderされたcontainerを、Clientでも再利用するために使用。
   • 上記2つのAPIとも、onRecoverableError という新しいoptionが追加。これは、Reactが何かしらのerrorから回復したことを知りたい際に使用するoption。

   4.2 React DOM Server

   【新規API】

   • renderToPipeableStream: Node環境でのストリーミングのため。
   • renderToReadableStram: DenoやCloudflareなど、最新のedge実行環境向け。
   • renderToStringは、後に廃止予定。

2. New Strict Mode Behaviors

New Strict Modeでは、componentが最初にmountされ、次のmount時に前のstateに復元した時に、自動的にunmountを行い、各componentを再度mountする。

1. New Hooks

• useId: clientとserver双方に、ユニークなIDを生成する。ユニークなIDが必要なアクセシビリティAPIに対して、有益となる。
• useTransition, startTransition: 即時ではないstateのupdateに使用。
• useDeferredValue: treeの不要な箇所の再レンダリングを延長することができる。
• useSyncExternalStore: storeへの更新を強制的に同期することで、外部のstoreが同時に読み込みができるようにする。
• useInsertionEffect: CSS-in-JSが、render時にstyleを挿入する際のパフォーマンスに対応するためのhook。

Reference

• React v18.0