20220401_React v18に関する理解

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);

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);
});

Suspence

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

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

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は、後に廃止予定。
New Strict Mode Behaviors

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

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

React v18の変更内容まとめ

20220401_React v18に関する理解

Reference